9

我需要用 CSS 布局一个 html 数据表。

表格的实际内容可能有所不同，但总是有一个主列和 2 个或更多其他列。我想让主列占用尽可能多的宽度，无论其内容如何，​​而其他列占用尽可能少的宽度。我无法为任何列指定确切的宽度，因为它们的内容可能会改变。

如何仅使用简单的语义有效的 html 表和 css 来做到这一点？

例如：

| 主栏 | 第 2 栏 | 第 3 栏 |
 <----------------- 固定宽度，单位为 px ------------------->
 <--------尽可能宽-------->
 根据内容尽可能薄：<-----> <-------->
4

3 回答 3

8

类似于 Alexk 的解决方案，但根据您的情况可能更容易实现：

<table>
    <tr>
        <td>foo</td>
        <td class="importantColumn">bar</td>
        <td>woo</td>
        <td>pah</td>
    </tr>
</table>

.importantColumn{
    width: 100%;
}

white-space:nowrap如果您想避免包装，您可能还想应用于单元格。

于 2008-09-23T02:06:40.710 回答
6

我远不是 CSS 专家，但这对我有用（在 IE、FF、Safari 和 Chrome 中）：

td.zero_width {
    width: 1%;
}

然后在您的 HTML 中：

<td class="zero_width">...</td>
于 2008-09-23T01:38:07.517 回答
1

我width: 100%;似乎没有成功，因为如果没有具有固定宽度的容器 div，这将无法获得预期的结果。相反，我使用类似下面的东西，它似乎给了我最好的结果。

.column-fill { min-width: 325px; }

这样，如果需要，它可以变得更大，并且似乎浏览器会将所有额外空间分配给以这种方式设置的任何列。不确定它是否适用于所有人，但在 chrome 中对我有用（没有尝试过其他人）......值得一试。

于 2013-05-31T18:35:36.160 回答