关于html：TD列宽值不适用于固定的表格布局


TD column width value not working with fixed table-layout

我有以下表结构：

1
2
3
4
5
6
7
8
9
10
11
12
<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类的定义是：

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

问题是，尽管我明确定义了每列宽度，但所有列都以相等的宽度显示。

为什么上述宽度值不起作用？ 有什么建议可以使其与固定表布局一起使用吗？

相关讨论

" archaic" width属性不使用单位，它期望类似于width="20"的内容。

但是，定义表的"最正确"方法是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

这对于大型表尤其有效，因为浏览器仅需读取

元素即可准确知道整个表的布局方式，而无需根据各个单元格样式来计算宽度。

您必须使用：

1
<td width="20">

要么

1
<td style="width: 20px">

您应该将属性width设置为不带单位px。可能有些现代浏览器接受带有单位的属性，但这不是正确的方法！

在另一个Stackoverflow案例中，您也遇到类似的问题：

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

1
<td style="width: 20px">

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

例如，

的HTML

1
2
3
4
5
6
7
8
9
10
11
12
<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

1
2
3
4
5
6
7
8
9
.column-1 {
    width: 50%;
}
.column-2 {
    width: 25%;
}
.column-3 {
    width: 25%;
}

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

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

建议这样的选择

的HTML

1
2
3
4
5
6
7
8
9
10
11
12
<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

1
2
3
4
5
6
7
8
9
10
11
12
.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;
}

演示

好像是为我准备的作品。请检查以下小提琴。

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

http://jsfiddle.net/9x56E/