如何自動調整HTML表格單元格的大小以適合文本大小

Question

我有一個包含2行和變量列的表格。我試過width = 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% 
}