HTML表格在不同行中的列数不同 [英] HTML Table different number of columns in different rows

问题描述

像Excel表格一样，我可以有

1. 第一行的2列


2. 1长第二行中的列

可以在html中使用吗？

解决方案

在你不熟悉 colspan 的实现中，我推测你也不熟悉 rowspan code>，所以我想我会免费的。

使用 rowspan code>：下面的 tr elements must 包含更少的 td 元素，因为在前一行（或之前的行）中使用 rowspan 的单元格。



CSS：



  table {border：1px solid＃000;边界崩溃：崩溃; } 
 th，td {border：1px solid＃000; } 
  

html：

 <表> 
< thead> 
< tr> 
< th colspan =2>第一列和第二列< / th> 
< th>第三列< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td rowspan =2colspan =2>一个大单元< / td> 
< td>一个较小的单元< / td> 
< / tr> 
< tr> 
 <！ - 注意这行只有_one_ td，因为前面的行
占用了这一行的一部分 - > 
< td>另一个小单元< / td> 
< / tr> 
< / tbody> 
< / table> 
  

演示： jsbin

Like in Excel sheet can I have

1. 2 columns in 1st row
2. 1 long column in the 2nd row

is this possible in html ?

解决方案

On the realisation that you're unfamiliar with colspan, I presumed you're also unfamiliar with rowspan, so I thought I'd throw that in for free.

One important point to note, when using rowspan: the following tr elements must contain fewer td elements, because of the cells using rowspan in the previous row (or previous rows).

CSS:

table {border: 1px solid #000; border-collapse: collapse; }
th, td {border: 1px solid #000; }

html:

<table>
    <thead>
        <tr>
            <th colspan="2">Column one and two</th>
            <th>Column three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2" colspan="2">A large cell</td>
            <td>a smaller cell</td>
        </tr>
        <tr>
            <!-- note that this row only has _one_ td, since the preceding row
                 takes up some of this row -->
            <td>Another small cell</td>
        </tr>
    </tbody>
</table>

Demo at: jsbin

这篇关于HTML表格在不同行中的列数不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！