HTML / CSS元素集的宽度

Question

假设以下基本表结构：

    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

是否可以使前两个数据单元和最后两个数据单元始终为总宽度的50％？如果一个单元格变大，另一个单元格会尽可能地缩小，但是它们的总宽度将是整个表格的50％。例如：

|1 |2 |3 |4 |

可以调整为

|1 |2 |3 |4 |

其中1和3的起始位置永远不会改变，2和4的结束位置永远不会改变。

编辑：理想情况下，不会在第二个表中嵌套以容纳<td>元素对。

Answer 1

有点hacky - 但你可以尝试：

.fifty {
  width: 50%
}

<table>
  <tr>
    <td class="fifty" colspan="2">foo</td>
    <td class="fifty" colspan="2">bar</td>
  </tr>
  <tr>
    <td>foo bar</td>
    <td>foo foo bar</td>
    <td>foo foo</td>
    <td>foo bar</td>
  </tr>
</table>