[英]HTML table last td to take remaining width
I have a table with one TR and 2 TD's. 我有一张TR和2个TD的桌子。 I want the first TD to adjust width automatically depending on its content, and the second TD to use up the remainder of the width.
我希望第一个TD根据其内容自动调整宽度,第二个TD使用宽度的其余部分。
This is what I have: 这就是我所拥有的:
<table style="width: 100%;"> <tr> <td>short content</td> <td>long content</td> </tr> </table>
The entire table width is 100% (as I want it), but I don't know how to adjust the TD widths to achieve my goal. 整个表格宽度是100%(我想要它),但我不知道如何调整TD宽度来实现我的目标。
You can give the first td
a small width, eg 1px
, with white-space: nowrap;
你可以给第一个
td
一个小宽度,例如1px
,带有white-space: nowrap;
table { width: 100%; border-collapse: collapse; } td { border: 1px solid red; } td:first-child { width: 1px; white-space: nowrap; }
<table> <tr> <td>short content</td> <td>long content</td> </tr> </table>
Or, give the last td
a large width, eg 100%
. 或者,给最后一个
td
一个大的宽度,例如100%
。
table { width: 100%; border-collapse: collapse; } td { border: 1px solid red; } td:first-child { white-space: nowrap; } td:last-child { width: 100%; }
<table> <tr> <td>short content</td> <td>long content</td> </tr> </table>
Setting white-space: nowrap
on all cells except for the last one, and giving the last one 100% width, worked for me: 设置
white-space: nowrap
在除最后一个之外的所有单元格上,并给出最后一个100%宽度,为我工作:
td:not(:last-child), th:not(:last-child) {
white-space: nowrap;
}
td:last-child, th:last-child {
width: 100%;
}
This will make sure that text wrapping still works while still filling the table when space is available. 这将确保文本包装仍然有效,同时在空间可用时仍然填充表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.