Question

我有以下表结构：

<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;
}

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

为什么上面的宽度值不起作用？是否有任何建议使其适用于固定的表格布局？

Answer 1

你必须使用：

<td width="20">

或

<td style="width: 20px">

Answer 2

＆＃34;古老＆＃34; width属性不占用单位，它需要width="20"。

然而，＆＃34;最正确的＆＃34;定义表的方式如下：

<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>元素就可以准确了解整个表的布局方式，而无需根据单个单元格样式计算宽度。

Answer 3

对于td，width属性不支持px，如果要在px中写入宽度，则需要提供如下的css

<td style="width: 20px">

Answer 4

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

您在此another Stackoverflow case中遇到了类似的问题：

Answer 5

似乎像我一样的作品。请检查以下小提琴。

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

http://jsfiddle.net/9x56E/

Answer 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

Answer 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/

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

7 个答案: