html - 如何创建两个相等的列，中间有一个固定空间

Question

我有一个 width:100% 的表格，它应该有 3 列，如下所示:

[50%-space/2][space][50%-space/2]

现在，我已经有了这个

<table style="width:100%"><tr>
   <td>left</td>
   <td style="width:20px"></td> //space
   <td>right</td>
</table>

只要始终存在宽度相同的“左”和“右”宽度，此方法就可以正常工作，但如果宽度不同，它就会停止工作:

<table style="width:100%"><tr>
   <td></td>
   <td style="width:20px"></td> //space
   <td>right</td> // right takes all the space from the first td
</table>

如果我将“左”和“右”分别设置为 50%，则中间的空格将被省略:

<table style="width:100%"><tr>
   <td style="width:50%"></td>
   <td style="width:20px"></td> //space
   <td style="width:50%">right</td> // right takes all the space from the first td
</table>

不幸的是，在这种情况下空格不能在 % 中(这很容易解决问题)。此外，使用 CSS 列(目前)还不是一个选项。

有解决办法吗？

---

JSFiddle

---

Answer 1

Example: http://jsfiddle.net/9yVx9/1/

---

使用 table-layout: fixed 属性

table {
    table-layout:fixed;
}

---

截图