HTML 表格最后 td 取剩余宽度 [英] HTML table last td to take remaining width
本文介绍了HTML 表格最后 td 取剩余宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一张桌子,上面有一个 TR 和 2 个 TD.我希望第一个 TD 根据其内容自动调整宽度,第二个 TD 用完剩余的宽度.
I have a table with one TR and 2 TD's. 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.
这就是我所拥有的:
<table style="width: 100%;">
<tr>
<td>short content</td>
<td>long content</td>
</tr>
</table>
整个表格宽度为 100%(如我所愿),但我不知道如何调整 TD 宽度以实现我的目标.
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.
推荐答案
你可以给第一个 td
一个小的宽度,例如1px
,带有 white-space: nowrap;
You can give the first td
a small width, e.g. 1px
, with 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>
或者,给最后一个 td
一个大的宽度,例如100%
.
Or, give the last td
a large width, e.g. 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>
这篇关于HTML 表格最后 td 取剩余宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文