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

Question

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

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

正如这个例子所示，我希望td1和td3的宽度是固定的，而td和td2的宽度则可以根据屏幕比例/浏览器宽度进行自动扩展。我想知道是否有一种使用CSS实现这一点的方法？

为了明确，我已经使用了colspan和width值来达到我的目的，但是如何使用colspan和width值使td1比th更小呢？colspan不起作用，width值也没有效果。

- Edward

Answer 1

这只是正确设置colspan的简单问题。

表头行：每个单元格都应该有2个colspan（3个单元格* 2个colspan = 6个colspan单元格）
表体行：每个单元格都应该有3个colspan（2个单元格* 3个colspan = 6个colspan单元格）。

更新

似乎存在一种不一致性，涉及到同时设置colspan和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>

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

我认为这似乎不一致，我没有解决方法，最好是检查是否可以以不同的方式显示表格（即所有行中包括标题的相同列数（这样做更有意义，无论如何，在我的看法中））。

- user253984

---

嗯，你是不是指的是2和3，而不是3和4？ - animuson

应该是2和3，但是主意不错。 - Kobi

从您的回答中学到了很多，但按照您所说的尝试后，td1（实际上是td1和ths，我刚刚更新了我的问题）总是保持不变，那在th上有不同吗？ - Edward

Answer 2

尝试使用这些colspan：

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

- pdr

---

刚刚尝试了一下，但是td1始终保持相同的宽度。顺便说一下，tr2 tr3的td1实际上是th，我刚刚更新了我的问题。 - Edward

考虑到这一点，我想知道您是否正在使用正确的结构来完成您所尝试的任务。有时在第一列中使用TH，有时在第一列中使用TD并不是很合理。您能否举一个您尝试呈现的数据类型的例子？例如，DD、DT、DL是否更为适当？http://www.benmeadowcroft.com/webdev/articles/definition-lists.shtml - pdr

不是有时候，只是表格的第一行有多个td，并且其它行与<th><td>相同。这个问题真的让我头疼，我放弃使用多个td在第一行，而是用多个div，这似乎能解决我的问题。 - Edward

很难在没有具体示例的情况下确定，但听起来DIV可能是正确的方法。只有在处理表格数据时才使用表格，因为根据您的描述，顶部行似乎不需要与表格中的其他内容对齐。 - pdr

Answer 3

从这个有限的例子来看，我认为你需要两个表格。

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

另一个用于表格的其余部分......按您的喜好进行格式设置，只需将表格宽度设置为与顶行相同，以便看起来像一个表格。您可能需要设置0边距/填充。

或者，您可以将其制作为一个表格并进行一些colspan技巧。

- mpen

---

是的，我在tr2 tr3 ...上使用了colspan，但它们的td1尽管有width值，但仍保持相同的宽度，我想知道如果我成功地将tr1的td1宽度固定，那么是否仍然会应用于tr2/tr3的td2。 - Edward

Answer 4

如果您未指定 td 的宽度，它们的宽度将根据其内容自动增加。此外，您可以使用 colspan 将一个 td 扩展到您想要的大小...

- Sarfraz

Answer 5

列中的所有单元格具有相等的宽度。要使单元格跨越多列，请使用 colspan 属性。行中的所有单元格组合起来将扩展到填充表的整个宽度。

- nikc.org