HTML/CSS 组 <td> 元素的宽度

Question

假设以下基本table结构：

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

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

|1 |2 |3 |4 |

可以调整到

|1 |2 |3 |4 |

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

编辑：理想情况下无需在一秒钟内嵌套 table 来容纳一对 <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>

HTML/CSS 组 <td> 元素的宽度

HTML/CSS width of set of <td> elements

html

css

width