html - HTML表格，有没有办法将第二列放到新行？

Question

嗨，我有一个包含 5 列的表，问题是第一列的<td>值可能很长，因此会被塞满。有没有办法将第二列移动到换行符并将第一列跨越整行而不<tr>为第一列创建新行

谢谢

Answer 1

不，您必须为第二行tr创建一个新的（表格行），并且您可以使用该属性使第一个更宽。colspan

像这样的东西：

<table>
  <tr>
    <td colspan="2">abcdefg</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

Answer 2

我不相信td's可以那样垂直堆叠..也许不是使用td's，你可以将它们分成div's，弄乱CSS会使它们排成一行，当第一个伸展到大时，它应该把另一个推到下面吗？

编辑 2：较新的版本，更好的对齐。

<table style="width: 200px;">
    <tr>
        <td>
            <div style="background-color: red; display: inline;">
                OneOneOneOne
            </div>
            <div style="background-color: blue; display: inline; width: 90px;">
                TwoTwoTwo
            </div>
            <div style="background-color: green; display: inline; width: 90px;">
                Three
            </div>  
        </td>
    </tr>
    <tr>
        <td>
            <div style="background-color: red; display: inline;">
                OneOneOneOneOneOneOneOneOneOneOne
            </div>
            <div style="background-color: blue; display: inline; width: 90px;">
                TwoTwoTwo
            </div>
            <div style="background-color: green; display: inline; width: 90px;">
                Three
            </div>
        </td>
    </tr>
</table>  

看起来不漂亮，需要更多的调整，但它就像你描述的那样......