Question

我正在尝试在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          ]

Answer 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>

Answer 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>

Answer 3

空洞＆＃34; td＆＃34;里面＆＃34; tr＆＃34;会给出一个非常接近的结论：

 <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>

Answer 4

不能兼容地了解跨浏览器，但这是一个解决方案。

＆＃13;

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

＆＃13;

<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>

＆＃13;

我是否必须为每一行使用colspan？

4 个答案: