TD 列宽值不适用于固定表格布局答案

【问题标题】：TD column width value not working with fixed table-layoutTD 列宽值不适用于固定表格布局
【发布时间】：2014-07-15 06:57:01
【问题描述】：

我有以下表结构：

<table class="tableStyle">
<tr>
    <td width="20px">col1</td>
    <td width="50px">col2</td>
    <td width="50px">col3</td>
    <td width="15px">col4</td>
    <td width="25px">col5</td>
    <td width="20px">col6</td>
    <td width="20px">col7</td>
    <td width="20px">col8</td>
</tr>
</table>

CSS类定义是：

.tableStyle{
table-layout:fixed;
margin: 0 auto; width: 960px;
}

问题在于，尽管我明确定义了每个列的宽度，但所有列的显示宽度都相同。

为什么上面的宽度值不起作用？有什么建议让它与固定表格布局一起使用？

【问题讨论】：

嗨！我刚刚在jsBin 中尝试过，每列都有不同的宽度。您在哪里尝试过您的代码？
你的代码很完美，td是不同宽度的显示
不要使用width 属性。它已被弃用了 loooong 时间。

标签： html css

【解决方案1】：

“古老的”width 属性不带单位，它需要类似 width="20" 的东西。

然而，定义表的“最正确”的方式是这样的：

<table>
    <colgroup>
        <col style="width:20px" />
        <col style="width:50px" span="2" />
        <col style="width:15px" />
        <col style="width:25px" />
        <col style="width:20px" span="3" />
    </colgroup>
    <tbody>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td>col3</td>
            <td>col4</td>
            <td>col5</td>
            <td>col6</td>
            <td>col7</td>
            <td>col8</td>
        </tr>
    </tbody>
</table>

这对于大型表格特别有效，因为浏览器只需要读取<colgroup> 元素即可准确了解整个表格的布局方式，而无需根据单个单元格样式计算宽度。

【讨论】：

【解决方案2】：

你必须使用：

<td width="20">

或

<td style="width: 20px">

【讨论】：

【解决方案3】：

你应该属性width 没有单位px。可能有一些现代浏览器接受带有单位的属性，但不是正确的方法！

你在这个another Stackoverflow case中遇到了类似的问题：

【讨论】：

【解决方案4】：

td的width属性不支持px，如果要以px写宽度，需要提供css如下

<td style="width: 20px">

【讨论】：

【解决方案5】：

似乎符合我的预期。请检查下面的小提琴。

.tableStyle{
table-layout:fixed;
margin: 0 auto; width: 960px;
}

http://jsfiddle.net/9x56E/

【讨论】：

【解决方案6】：

建议这样的选择

HTML

<table class="tableStyle">
<tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
    <td>col4</td>
    <td>col5</td>
    <td>col6</td>
    <td>col7</td>
    <td>col8</td>
</tr>
</table>

CSS

.tableStyle{
table-layout:fixed;
margin: 0 auto; width: 960px;
  background: #ddd;
}
td:nth-child(1n) {
  width: 20px;
  background: #876342;
}
td:nth-child(3n+1) {
  width: 100px;
}

demo

【讨论】：

【解决方案7】：

不要将宽度放在 td 上，而是尝试使用 css 将其添加到 th 上。

例如，

HTML

<table>
    <tr>
        <th class="column-1">Heading 1</th>
        <th class="column-2">Heading 2</th>
        <th class="column-3">Heading 3</th>
    </tr>
    <tr>
        <td>TD 1</td>
        <td>TD 2</td>
        <td>TD 3</td>
    </tr>
</table>

CSS

.column-1 {
    width: 50%;
}
.column-2 {
    width: 25%;
}
.column-3 {
    width: 25%;
}

我遇到了完全相同的问题，发现此资源很有帮助：

https://css-tricks.com/fixing-tables-long-strings/

【讨论】：