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

Posted 2023-03-05

【中文标题】使用 table-layout=auto 固定 HTML 表格中的宽度列

【英文标题】：Fixed width column in HTML table with table-layout=auto

【发布时间】：2012-12-29 23:48:17

【问题描述】：

当 html 表格将其 table-layout 设置为 auto 时，其列会自动调整大小。鉴于这种情况，有没有办法让特定列保持固定宽度？我试过使用 CSS 宽度 - 似乎没有任何效果。

【参考方案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/

【讨论】：

你这辈子都去哪儿了 :) ？

只是回报 :)

【参考方案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>

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review

它确实回答了这个问题，但我已经澄清了我的回答

一个很好的答案，解决了我的问题。谢谢。

【参考方案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>