如何在单元格中拆分表格单元格？

Question

我有这张桌子，我在线创建一个rp。并且一些细胞需要多种颜色。我认为我使用的是渐变色，但是黑色的效果太强了。

我如何拆分这些细胞？它们不在标题附近，需要是细胞本身的一半大小。

Answer 1

如果您只是将其拆分为2，则可以使用<div>和float:left;以及float:right;

2 <td> <div style="background-color:red; float:left; height:50px; width:50px;"></div><div style="background-color:blue; float:right; height:50px; width:50px;"></div> </td>

<div>

如果您需要添加更多颜色变化，只需添加更多{{1}}，并根据您添加它的方向添加相应的浮点数。我认为这在大多数情况下都有效。

Answer 2

你的意思是“黑色太强大了”？

您可以使用线性渐变并创建精确边框，例如以下两个类.x和.y，记录每种颜色两次，并使它们之间的“边界”为50％/ 51％梯度：

table {
  width: 50%;
  height: 50px;
}
td {
  border: 1px solid #ddd;
}
.x {
  background: linear-gradient(to right, #fa0, #fa0 50%, #0fa 51%, #0fa 100%);
}
.y {
  background: linear-gradient(to right, #dc3, #dc3 50%, #c3f 51%, #c3f 100%);
}

<table>
  <tr>
    <td class="x"></td>
    <td class="y"></td>
    <td class="x"></td>
    <td class="y"></td>
  </tr>
  <tr>
    <td class="y"></td>
    <td class="x"></td>
    <td class="y"></td>
    <td class="x"></td>
  </tr>
</table>