如何固定表格列宽？

Posted 2021-05-04

我有一个有两列的表，第一列65％，第二列35％。它完全适合100％的屏幕，如果第一列中有足够的文本来填充65％，但如果它是空的（或少量文本） - 则第一列缩小，第二列扩展。

如何使用或不使用文本将第一列始终显示65％的屏幕？

答案

试试这个：

<table class="fixed_width">
    <col width="65%" />
    <col width="35%" />
    <tr>
        <td>your data</td>
        <td>your data</td>
    </tr>
</table>

和CSS：

table.fixed_width { table-layout:fixed; }
table.fixed_width td { overflow: hidden; }

另一答案

<table>
    <tr>
        <td style="width: 65%;">
            first column
        </td>
        <td style="width: 35%;">
            second column
        </td>
    </tr>
</table>

第一列将始终保持65％，除非你在里面放一些大于65％的东西（例如一张大图）

另一答案

尝试添加此CSS：

table {
    table-layout: fixed;
    empty-cells: show;
}

https://developer.mozilla.org/en-US/docs/CSS/empty-cells

https://developer.mozilla.org/en-US/docs/CSS/table-layout

@ kalpesh对<colgroup>的推荐也很好。

https://developer.mozilla.org/en-US/docs/HTML/Element/colgroup

另一答案

试试这个css：

.table {
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
    }

    .td1 {
      border: 1px solid #000;
      width: 65%;
    }

    .td2{border: 1px solid #000;
      width: 35%;
    }

和

<table class="table">
    <tr>
        <td class="td1">data</td>
        <td class="td2">data</td>
    </tr>
</table>