Question

我有一个5列表，其第一列和最后一列具有固定（和不同）的宽度。如何强制3个中心列在表格的剩余宽度上均匀分布？

HTML：

<table>
    <tr>
        <td id="first">A<td>
        <td id="second">B<td>
        <td id="third">C<td>
        <td id="fourth">D<td>
        <td id="fifth">E<td>
    </tr>
</table>

CSS：

table { width: 100%; }
td#first { width: 100px; }
td#fifth { width: 200px; }

当浏览器宽度为1200px时，我希望＃second，＃third和#fourth为（1200 - （100 + 200））/ 3 = 300px宽。理想情况下，我不会对HTML的结构进行更改。

谢谢！

编辑：理想情况下，无论非固定宽度列的数量如何，这都可以。

答案：

感谢用户Chris下面的回答。这是使其起作用的最小CSS（减去边界）：http://plnkr.co/edit/3K5hE0Kn5D9S7bIDbOPl?p=preview

Answer 1

尝试以下操作怎么样？

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style type="text/css">
      table{width: 100%; font-size: 0; line-height: 12px; table-layout: fixed;}
      td {border: 1px solid black; }
      #first{ min-width: 10px; width: 10px; }
      #second{ min-width: 20px; width: 20px; }
    </style>
  </head>

  <body>
    <table>
      <td id="first">&nbsp;</td>
      <td id="second">&nbsp;</td>
      <td id="third">&nbsp;</td>
      <td id="fourth">&nbsp;</td>
      <td id="fifth">&nbsp;</td>
    </table>
  </body>

</html>

Plunker：http://plnkr.co/edit/SRo9hcIVxFznFbbzA2fq?p=preview

如何使表的列填充未被固定宽度列占用的宽度？

1 个答案: