HTML表格：固定和动态宽度

Question

我有一张类似这样的表格：

<table>
    <tr>
        <td id='col1' style='width:120px;'>
            Content here...
        </td>
        <td id='col2' style='width:30px;'>
            Content here...
        </td>
        <td id='col3' style='width:35px;'>
            Content here...
        </td>
    </tr>
</table>

现在，我希望 col1 的宽度固定为120px。然而，col2 和 col3 应该具有剩余表格空间的动态宽度。相对于彼此，分别为 30% 和 35%。（也就是说，如果 col2 是 300px，那么 col3 应该是 320px。）

- Chaim

---

你是在使用表格进行布局还是数据表示？ - AlanFoster

是的，除非这只是一个简单展示数据位的列表，否则不要使用表格。 - alt

是的，这不是完整的表格，只包括相关部分。 - Chaim

如果剩下的空间全部被占用，col2 占 30%，col3 占 35%，那么你会怎么处理剩下的 35%？ - bingjie2680

不，它不应该是表格的30％和35％，而应该是相对于彼此的30％和35％。 - Chaim

或者它可以是表的30%和35%(或任何其他数字)，其余部分可以保持空白(例如在下面建议的第四个'td'中)。 - Chaim

Answer 1

我假设还有第四列来占据剩余的空间？无论如何，如果没有的话，您可以进行适当调整...

<table width="800"> <!-- or <table width="50%"> or <table style="width:800px"> etc -->
 <colgroup>
   <col width="120" />
   <col width="30%" />
   <col width="35%" />
   <col />
 </colgroup>
  <tbody>
    <tr> 
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col 4</td>
    </tr>
  </tbody>
</table>

第一列固定为120像素；第二列和第三列分别为30％和35％，剩余空间分配给动态大小的第四列。

- Chris Baxter

---

这个不起作用。在这里看看...http://jsfiddle.net/bingjie2680/tCdEz/ 尝试放大右边的框架，它没有占据剩下的部分。 - bingjie2680

@bingjie - 你是否为表格设置了明确的宽度？如果没有提供表格宽度（即style="width:100%"），那么表格将根据其内容大小调整，列宽将被忽略。 - Chris Baxter

@Chaim - 表格宽度可以是px或％; 只要表格有“width”属性即可; lnrbob的答案也依赖于表格宽度。 - Chris Baxter

同时，使用固定布局（并将表格宽度更改为百分比）运行lnrbob的示例也无法正常工作。 - Chaim

哦，我现在明白了。如果你不使用固定布局，那么当你缩小区域（为了容纳第一列和其他列的全宽度），第一列会变小；如果你使用固定布局，则无论区域大小如何，第一列的大小都将保持不变。 - Chaim

Answer 2

你尝试过使用 table-layout:fixed 吗？我不是100%确定，但这里有一个快速模拟，似乎可以起作用：http://jsfiddle.net/pm6pt/

- Stuart Burrows