css - 如何使用CSS构建复杂的表格？

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

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

如此示例所示，当屏幕 radio /浏览器宽度更改时，我希望td1和td3的宽度固定，td和td2的宽度自动扩展。我想知道是否有一种使用CSS的方法？

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

最佳答案

正确设置colspan是一个简单的问题。

表格标题行:每个单元格的colspan为2(3个单元格* 2 colspan = 6 colspan-cells)。
表主体行:每个单元格的colspan为3(2个单元格* 3 colspan = 6 colspan-cells)。

更新

似乎存在不一致的情况，这涉及同时设置了colspan和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>

这将大致产生所需的输出，但是第th列th1扩展为与后续td(td2)的大小相同。除非表格小于240px，否则两者始终占据表格的50％，然后th1保持在120px。

这对我来说似乎不一致，并且我没有解决方法，最好是如果您检查是否可以以不同的方式显示表(即包括标题在内的所有行中的列数相同(总之，恕我直言，恕我直言))。

关于css - 如何使用CSS构建复杂的表格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2627370/