TD列宽度值不能与固定表格布局一起使用

问题描述

我有以下表结构：

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

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

The problem is that all columns are displaying with equal width despite the fact that i am explicitly defining each column width.

为什么上面的宽度值不工作？任何建议使其与固定表格布局协同工作？

Why are above width values are not working? Any suggestion to make it work with fixed table layout?

推荐答案

archaic width 属性不需要一个单位，它期望像 width =20。

The "archaic" width attribute does not take a unit, it expects something like width="20".

，定义表格的最正确方式如下：

However, the "most correct" way to define a table is like so:

<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> 元素来确切地了解整个表格应该如何布局，而不需要根据单个单元格样式计算宽度。

This works especially well for large tables, because the browser only needs to read the <colgroup> element to know exactly how the entire table should be laid out, without needing to calculate widths based on individual cell styles.

这篇关于TD列宽度值不能与固定表格布局一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！