TD 列寬值不適用於固定表格布局

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

“古老”的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>元素即可准確了解整個表格的布局方式，而無需根據單個單元格樣式計算寬度。

Answer 2

你必須使用：

<td width="20">

或者

<td style="width: 20px">

Answer 3

width 屬性不支持 px 為 td，如果要以 px 寫寬度，則需要提供 css 如下

<td style="width: 20px">

Answer 4

您應該使用沒有單位px的屬性width 。 可能有一些現代瀏覽器接受帶有單位的屬性，但不是正確的方法！

在另一個 Stackoverflow 案例中，您有類似的問題：

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

演示

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/