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

我有一个2行和variables列的表。 我试过width = 100％的列。 所以在视图中的第一个内容将适合。 但假设如果我dynamic地改变内容，那么它不会dynamic增加/减lessHTML表格的列大小。 提前致谢。

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% }