我表中的一个单元格需要分成两个相等的“列”

【问题标题】：One cell in my table needs to be split into two equal 'columns'我表中的一个单元格需要分成两个相等的“列”
【发布时间】：2019-03-07 04:01:43
【问题描述】：

大表格中的一个单元格需要分成 2 个等宽的“列”。我意识到我可以使用colspan，但不是让表格跨度中的所有其他单元格都拆分，以便 这一个单元格 被拆分，我正在寻找内联或 CSS 替代方案，例如浮动，等等。这是我想要得到的截图：

【问题讨论】：

当您拆分单元格的内容时，您是否打算保留该更改？

标签： html css html-table split cell

【解决方案1】：

只需在单元格中放置两个 span 或 div 并使用 css 设置它们的样式。

table {
  with: 100%;
}

td div {
  display: inline-block;
  width: 50%;
  padding: 5px;
  box-sizing: border-box;
}

td div:first-child {
  background-color: blue;
}

td div:last-child {
  background-color: yellow;
}

<table>
  <tbody>
    <tr>
      <td>Normal cell</td>
      <td><div>Split</div><div>Cell</div></td>
      <td>Normal cell</td>
    </tr>
  </tbody>
</table>

【讨论】：

阿德里安。 . .好吧，我已经进一步了解了您有用的代码，但它不起作用。请参阅我的 (CODEPEN)codepen.io/semicodin/pen/MPVWyK)。