使用 table-layout=auto 在 HTML 表格中固定寬度的列

Question

當一個 HTML 表格的table-layout設置為auto它的列是自動調整大小的。 鑒於這種情況，有沒有辦法保持特定列的固定寬度？ 我試過使用 CSS 寬度 - 似乎沒有任何效果。

Answer 1

如果您使用nth-child則可以使用CSS執行此操作

CSS：

.table {
    table-layout:auto
}
td, th {
    border: 1px solid #999;
    padding: 0.5rem;
}
.table1 th:nth-child(1), .table1 td:nth-child(1) {
    width: 200px; /*becomes 218px with padding*/
    background: hsl(150, 50%, 50%);
}

HTML：

<h3>table 1</h3>

<table class="table1">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>I'm 218px wide!</td>
            <td>00001</td>
            <td>Blue</td>
        </tr>
        <tr>
            <td>I'm 218px wide!</td>
            <td>00002</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>I'm 218px wide!</td>
            <td>00003</td>
            <td>Green</td>
        </tr>
    </tbody>
</table>

<p>&#160;</p>

<h3>table 2</h3>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>I'm 118px wide!</td>
            <td>00001</td>
            <td>Blue</td>
        </tr>
        <tr>
            <td>I'm 118px wide!</td>
            <td>00002</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>I'm 118px wide!</td>
            <td>00003</td>
            <td>Green</td>
        </tr>
    </tbody>
</table>

這是一個演示： http ： //jsfiddle.net/3dyhE/2/

Answer 2

使用min-width而不是width ：

<table style="table-layout: auto">
  <tr>
    <td style="min-width: 200px">some cell 200px width</td>
    <td>other cell, auto width</td>
    <td>other cell, auto width</td>
    <td>other cell, auto width</td>
    <td>other cell, auto width</td>
  </tr>
</table>

Answer 3

在我的情況下，我必須為所有列指定寬度，並讓它們相對於填充可用寬度的表格增長，但我仍然希望一列的寬度保持固定。 解決方案是為固定寬度列設置width為自動寬度列設置min-width和max-width寬度：

 table { table-layout: auto; text-align: left; border: 1px solid black; width: 100%; } td, th { border: 1px solid black; } .a { min-width: 100px; max-width: 100px; } .b { width: 50px; } .c { min-width: 40px; max-width: 40px; } .d { min-width: 80px; max-width: 80px; }

 <table> <tr> <th class="a">A</th> <th class="b">B</th> <th class="c">C</th> <th class="d">D</th> </tr> <tr> <td class="a">Very long text here</td> <td class="b">Very long text here</td> <td class="c">Very long text here</td> <td class="d">Very long text here</td> </tr> </table>