Q:

HTML/CSS width of set of  elements

Suppose the following basic table structure:
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

Is it possible to make it so that the first two data cells and the last two data cells are always 50% of the total width? If one cell gets bigger the other will shrink as much as it can but their total width will be 50% of the whole table. Ex:
|1 |2    |3     |4 |
can adjust to
|1   |2  |3   |4   |
where the start position of 1 and 3 never changes, the end position of 2 and 4 never changes.
EDIT: Ideally without nesting in a second table to house the pair of <td> elements.

A:

A bit hacky - but you may try:

.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>

