Question

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

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

如本例所示，我希望td1和td3的宽度是固定的，当屏幕无线电/浏览器宽度改变时，td和td2是宽度自动扩展。我想知道是否有办法使用CSS吗？

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

Answer 1

正确设置colspans是一件简单的事情。

表标题行：每个单元格获得2个colspan（3个单元格* 2个colspan = 6个colspan-cells）。
表体行：每个细胞得到3个细胞（2个细胞* 3个colspan = 6个colspan细胞）。

<强>更新

似乎存在一种不一致，其中涉及具有colspan和宽度设置的列。浏览器似乎忽略宽度值甚至最大宽度（最小宽度工作）。

示例：

<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）的相同大小。两者总是占据表的50％，除非表小于240px，然后th1保持在120px。

这似乎与我不一致，我没有解决方法，最好是你检查是否可以不同地显示表格（即包括标题在内的所有行中的列数相同（无论如何都会更有意义）。< / p>

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

Answer 4

如果您没有指定td的宽度，它们的宽度将根据其内容自动增加。此外，您可以使用colspan将td均衡为您喜欢的内容......

Answer 5

列中的所有单元格宽度相等。要使单元格跨越多个列，请使用colspan属性。连续组合的所有单元格将展开以填充表格的整个宽度。

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

5 个答案: