Question

我有一个HTML表格：

<table style="width: 398px;">
  <tbody>
  <tr>
    <th style="width: 40px">A</th>
    <th>Col B</th>
    <th>A longer column</th>
    <th>D</th>
  </tr>
  </tbody>
<table>

第一列设置为固定宽度。我希望其他三列能够平等地消耗所有剩余空间。

如果没有指定每列的像素宽度，有没有办法做到这一点？

您可以看到最后三列不使用相同的宽度： http://jsfiddle.net/ztyku/4/

Answer 1

你确定吗？这是什么浏览器？这是来自你的HTML：

http://jsfiddle.net/ztyku/

编辑：我刚刚在主要（现代）浏览器中尝试过此功能。顺便说一句，为什么要将<th>标记放在<tbody>？

中

Answer 2

您不想使用像素宽度，或者您不想使用任何宽度？基于百分比的宽度通常适用于这种情况。

<table style="width: 398px;" border=1>
  <tbody>
  <tr>
    <th style="width: 10%;">A</th>
    <th style="width: 30%;">Col B</th>
    <th style="width: 30%;">A longer column</th>
    <th style="width: 30%;">D</th>
  </tr>
  </tbody>
<table>

巧合的是，你的桌面宽度为398px的10％约为40px;这是你想要的宽度。

在HTML表中按比例调整列的大小

2 个答案: