如何自动调整 HTML 表格单元格以适应文本大小

Question

我有一个包含 2 行和可变列的表。 我为该列尝试了宽度 = 100%。 所以视图中的第一个内容将适合。 但是假设如果我动态更改内容，那么它不会动态增加/减少 HTML 表格列的大小。 提前致谢。

Answer 1

如果您希望单元格根据内容调整大小，则不得为表格、行或单元格指定宽度。

如果您不想自动换行，请将 CSS 样式white-space: nowrap分配给单元格。

Answer 2

你可以试试这个：

HTML

<table>
    <tr>
        <td class="shrink">element1</td>
        <td class="shrink">data</td>
        <td class="shrink">junk here</td>
        <td class="expand">last column</td>
    </tr>
    <tr>
        <td class="shrink">elem</td>
        <td class="shrink">more data</td>
        <td class="shrink">other stuff</td>
        <td class="expand">again, last column</td>
    </tr>
    <tr>
        <td class="shrink">more</td>
        <td class="shrink">of </td>
        <td class="shrink">these</td>
        <td class="expand">rows</td>
    </tr>
</table>

CSS

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td.shrink {
    white-space:nowrap
}
table td.expand {
    width: 99%
}

Answer 3

好吧，我也在为这个问题苦苦挣扎：这就是我解决它的方法：apply table-layout: auto; 到<table>元素。