如何使一个表格中的最后一个单元格占据所有剩余的宽度

在下面的HTML片段中，如何让包含'LAST'的列的宽度占据行的其余部分，并且包含'COLUMN ONE'和'COLUMN TWO'的列的宽度足够宽以包含其内容，而不是更大。

谢谢

table { border-collapse: collapse; } table td { border: 1px solid black; } 

 <table> <tr> <td> <table width="100%"> <tr> <td> <span> COLUMN </span> <span> ONE </span> </td> <td> COLUMN TWO </td> <td> LAST </td> </tr> </table> </td> </tr> <tr> <td> ANOTHER ROW </td> </tr> </table> 

Answer 1

您将需要告诉前两列不要换行，并给最后一列99％的宽度：

 <table width="100%"> <tr> <td style="white-space: nowrap;"> <span> COLUMN </span> <span> ONE </span> </td> <td style="white-space: nowrap;"> COLUMN TWO </td> <td width="99%"> LAST </td> </tr> </table> 

编辑：你应该把所有样式/演示文稿在（外部…）CSS。

使用类的列（你可以使用css3select器，如nth-child()而不是目标现代浏览器）：

HTML：

 <tr> <td class="col1"> // etc 

CSS：

 .col1, .col2 { white-space: nowrap; } .col3 { width: 99%; } 

Answer 2

使用CSS可能有更好的解决scheme，但是我所做的是将最后一列的宽度设置为95-100％

 <td> ONE </td> <td> TWO </td> <td width=100%> LAST </td>