html - CSS:强制三列表的两列宽度相同

Question

给定一个包含三列的表格，我希望前两列始终具有相同的动态宽度——也就是说，尽可能小，但这两列需要始终共享宽度。第三列应填充剩余的可用容器宽度。

例子:

+----+----+--------------+
|  A |  B |      C       |
+----+----+--------------+
|1234|  12|           foo|
+----+----+--------------+
|   a|   b|           bar|
+----+----+--------------+

请注意，尽管 B 的内容适合 2 个字符的列，但其宽度为 4 个字符。

硬编码 A 列和 B 列的宽度不是解决方案，因为内容的大小各不相同。

Answer 1

将强制前两列尽可能小 http://jsfiddle.net/DYeyp/

​<table border=1 style='width:100%;'>
​<tr>
 ​   <td style='width:1%;'>1111</td>
  ​  <td style='width:1%;'>1111</td>
  ​  <td>1</td>
​</tr>
​<tr>
 ​   <td>1</td>
  ​  <td>1</td>
  ​  <td>1</td>
​</tr>
​<tr>
 ​   <td>1</td>
  ​  <td>1</td>
  ​  <td>1</td>
​</tr>
​</table>​​​​​​​​​​​