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。）

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％，任何重新分配的空间都分配给第四个动态大小的列。

Answer 2

您是否尝试过使用table-layout:fixed？这不是100％，但这是一个似乎有效的快速模拟：http://jsfiddle.net/pm6pt/

HTML表格：固定宽度和动态宽度

2 个答案: