"Splitting"一个table？

Question

有什么方法可以 "split" table 行，以便我可以独立设置列宽？这就是我的意思：

************************************
*  70%                 *    30 %   *
************************************
*  20 %   *           80 %         *
************************************

我知道以下方法：

使用 2 tables。但这有时会给我带来整个宽度的问题，但它确实有效。
70% 和 80% 是 colspan="2"。那个感觉就像一个 hack 并且不是最优的。
在这个 table 中使用另一个 table 并将那个分开。这可行，但嵌套 table 变得复杂。

有没有办法把thead和tbody分开，然后单独设置宽度？

提前致谢...

伯恩哈德

Answer 1

我的建议是使用 DIV 而不是 table，请参阅..

<DIV style="width:100%"> 
  <DIV style="width:70%; float:left;">row1 - column1</DIV>
  <DIV style="width:30%; float:left;">row1 - column2</DIV>

  <DIV style="width:20%; float:left;">row2 - column1</DIV>
  <DIV style="width:80%; float:left;">row2 - column2</DIV>
</DIV>

同样，您可以使用不同宽度的列。你可以有自己的css 类，我只是把内联css用于演示。看到它非常灵活，因为您可以循环它或将 table（DIV 的）拆分为两个，但三个等等。

希望对您有所帮助。谢谢。

Answer 2

另一种实现它的可能性，但并不比您已经提到的 3 种可能的方法更简单，是
将 <td> 的 position 设置为 absolute，并为每个单元格相应地单独设置 width、top、left 属性。

这让您可以独立设置宽度，但您还必须设置顶部或左侧属性。

"Splitting"一个table？

"Splitting" a table?

html-table

column-width