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

【问题标题】：How to Auto resize HTML table cell to fit the text size如何自动调整 HTML 表格单元格以适合文本大小
【发布时间】：2011-07-07 23:43:34
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

如果我想拥有，说第一个 td 适合文本，其余的就等于表格的宽度？
@think123：对不起，我不明白你的问题。请使用 HTML 示例提出正确的问题。
基本上，我想要表格的宽度100%，并让每个 td 都适合其内容，除了最后一个，它构成了其余的空间。希望您能理解，因为我认为没有必要提问。
这里有答案：stackoverflow.com/questions/8230777/…
谢谢，我用谷歌搜索了一个小时才找到你的帖子和神奇的空白 CSS。

【解决方案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%
}

【讨论】：

【解决方案3】：

好吧，我也在努力解决这个问题：这就是我解决它的方法：将table-layout: auto; 应用于<table> 元素。

【讨论】：