欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

行跨度和列跨度的使用

最编程 2024-07-06 10:09:01
...

重点就是一定先分清楚,几个<tr>  一个<tr>就是一行



rowspan代表rownspan,row,英文行的意思

代表的意思就是行合并

分清楚几个tr再做处理

<table style="text-align: center">
    <thead>
    <tr>
        <th>第一</th>
        <th>第二</th>
        <th>第三</th>
        <th>第四</th>
    </tr>
    </thead>
    <tbody>
    <tr>      
	<td rowspan="4">1</td> <!--合并四行,下面的三行全部被占-->
	<td rowspan="2">2</td> <!--合并两行,下面的1行被占-->
<td>3</td> <td>4</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td rowspan="2">2</td> <td>3</td> <td>4</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody></table>


colspan代表columnspan,column,英文列的意思

代表的意思就是,列合并

<table class="table table-bordered" style="wtext-align: center;">
    <thead>
    <tr>
        <th>第一</th>
        <th>第二</th>
        <th>第三</th>
        <th>第四</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td colspan="2">2</td> <!--跨两列-->
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td colspan="3">4</td><!--跨三列-->
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    </tbody>
</table>










推荐阅读