我必须为每一行使用 colspan 吗？答案

【问题标题】：Do I have to use colspan for every row just for one row?我必须为每一行使用 colspan 吗？
【发布时间】：2017-07-12 01:56:02
【问题描述】：

我正在尝试在 html 中创建一个多行一列的表格。除一列外，所有行都有一列。我知道这可以用 colspan 完成。但我不想为每一行写 colspan 只是为了一个。有没有简单的方法可以做到这一点？

例子：

<table>
    <tr>
        <td>Some text</td>
    </tr>
    <tr>
        <td>Some text</td>
    </tr>
    <tr>
        <td>Some text</td>
    </tr>
    <tr>
        <td>Some text</td> 
        <td>Some text</td>
    </tr>
</table>

结构：

[         Some Text          ] 
[         Some Text          ] 
[         Some Text          ] 
[Some     Text][Some     Text] 
[         Some Text          ] 
[         Some Text          ]

【问题讨论】：

我认为没有colspan你就无法做到这一点

标签： html html-table row col

【解决方案1】：

否则不要使用表格使用 div

<div style="width:100px">
<label style="width:100px"></br>
<label style="width:100px"></br>
<label style="width:50px">
<label style="width:50px"></br>
<label style="width:100px"></br>
</div>

【讨论】：

【解决方案2】：

这个怎么样？

table tr:nth-of-type(4) {
  position: absolute;
  left: 0;
  right: 0;
}

table {
  position: relative;
}

<table>
  <tr>
    <td>Some text</td>
  </tr>
  <tr>
    <td>Some text</td>
  </tr>
  <tr>
    <td>Some text</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
</table>

【讨论】：

我用 jsfiddle 用表格边框试了一下。我认为有问题。我认为我必须使用 colspan

【解决方案3】：

在 "tr" 中放置一个空的 "td" 将给出一个非常接近的输出：

 <table border="0">
    <tr>
        <td></td>
        <td>Some text</td>
    </tr>
    <tr>
        <td></td>
        <td>Some text</td>
    </tr>
    <tr>
        <td></td>
        <td>Some text</td>
    </tr>
    <tr>
        <td>Some text</td> 
        <td></td>            
        <td>Some text</td>
    </tr>
  </table>

【讨论】：

【解决方案4】：

不了解跨浏览器是否兼容，但这里有一个解决方案。

td:only-child{
  display:block;
  width:100%
}

td {
  display:inline-block;
   background:#eee;
   text-align:center;
   width:50%;
   box-sizing: border-box;
}

<table width="250">
    <tr>
        <td>Some text</td>
    </tr>
    <tr>
        <td>Some text</td>
    </tr>
    <tr>
        <td>Some text</td>
    </tr>
    <tr>
        <td>Some text</td> 
        <td>Some text</td>
    </tr>
</table>

【讨论】：