本文介绍了HTML表格的最后td采取剩余宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一张桌子,上面有一个TR和两个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采取剩余宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 06:03