如何使用CSS构建一个复杂的表格？

Question

最近我遇到了一个复杂的表实现，例如：

tr1: | td1 | td2 | td3 |
tr2: |  th  |   td   |
tr3: |  th  |   td   |
...

如本例所示，我希望td1和td3的宽度固定，td和td2的宽度在screen-radio/browser-width改变时自动扩展。我想知道有没有办法通过使用CSS来做到这一点？

为了清楚起见，我已经使用了colspan和width值，但是如何通过使用colspan和width值来使td1小于th呢？colspan不工作，宽度值也不起作用

Answer 1

这是一个简单的问题，设置正确的柱距。

表头行:每个单元格的跨度为2 (3个单元格*2个跨度=6个跨度单元)。

表体行:每个单元格取3个单元格(2个单元格*3个colspan =6个colspan - Cell )。

更新

似乎存在一个不一致的地方，它涉及同时设置了colspan和width的列。浏览器似乎忽略了width的值，甚至忽略了max-width (min-width有效)。

示例：

<table border="1" style="width: 50%;">
    <tr>
        <td style="width: 100px;">td1</td>
        <td colspan="2">td2</td>
        <td style="width: 100px;">td3</td>
    </tr>
    <tr>
        <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th>
        <td colspan="2">td2</td>
    </tr>
    <tr>
        <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th>
        <td colspan="2">td2</td>
    </tr>
</table>

这将产生大致所需的输出，但第T列th1会扩展以匹配后面td (td2)的相同大小。除非表小于240px，否则两者始终占据表的50%，然后th1保持在120px。

这对我来说似乎不一致，我也没有解决办法，最好的办法是检查你是否可以以不同的方式显示表(即所有行中包括标题的相同列数(这无论如何都会更有意义))。

Answer 2

从这个有限的示例中，在我看来，您需要两个表。

一个用于顶行(显式设置td1、td3和整个表格的宽度。让td2自动扩展。

一张给剩下的桌子..。按照您的喜好设置格式，只需将表格宽度设置为与第一行相同，这样看起来就像一张表格。您可能必须设置0边距/填充。

或者，你可以把它做成一张桌子，然后做一些colspan hackery。

Answer 3

试试这些colspans：

tr1: | td1(1) | td2(2) | td3(1) |
tr2: |  td1(2)   |   td2(2)     |
tr3: |  td1(2)   |   td2(2)     |
...