Html 如何通过css将表格单元格分成两个具有不同背景的相等部分？

我有一个2x2的html表格。在表中的一个字段中，我有两个子字段。这两个子字段都应该包含表单元格的整个区域

---

通过CSS是否有一个直接的结果来实现这一点？

选项一

使用div可以分离表格单元格，而无需使用colspan

display:inline块

和

vertical align:top

可以使它们保持一致

---

选项二

使用colspan

HTML

---

我喜欢为此目的在表中创建表， 哪个是IMO最好的解决方案，哪个更具可扩展性

<table>
    <tr><th>1</th><th>2</th><tr>
        <tr><td>
            <table>
                <tr>
                    <td style="background-color:orange;">5</td>
                    <td style="background-color:blue;">6</td></tr></table></td><td>4</td>
</table>

12
5.
64

给你：

tr:nth-child(2) td:first-child {
    position: relative;
}
tr:nth-child(2) td:first-child:after,
tr:nth-child(2) td:first-child:before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    display: block;
    z-index: -1;
    margin: auto;
}
tr:nth-child(2) td:first-child:before {
    background: cyan;
    left: 0;
    right: 50%;
}
tr:nth-child(2) td:first-child:after {
    background: blue;
    left: 50%;
}

使用生成的内容使附加标记变得不必要

---

提琴：一些代码将不胜感激。当然你现在应该知道基本规则了吗？@Paulie_D并不是说每个问题都必须有代码。在这种情况下，我认为这张图片很好地说明了我的问题。表格单元格的大小是固定的还是可变的？@Christian没有……但你要求我们在不知道结构的情况下提供建议。如果我们提供的任何产品与您现有的产品不符，则可能会失效。简单的逻辑表明需要一些HTML。

<table>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td class="test"></td>
        <td class="test"></td>
        <td></td>
    </tr>
</table>

* {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border: solid 2px #111;
}

td {
    height: 100px;
    background: #FFF;
    border: solid 2px #111;
    width: 50px;
}

tr td:last-child {
    width: 100px;
}

.test {
    background: blue;
}
.test:first-child {
    background: green;
}

<table>
    <tr><th>1</th><th>2</th><tr>
        <tr><td>
            <table>
                <tr>
                    <td style="background-color:orange;">5</td>
                    <td style="background-color:blue;">6</td></tr></table></td><td>4</td>
</table>

tr:nth-child(2) td:first-child {
    position: relative;
}
tr:nth-child(2) td:first-child:after,
tr:nth-child(2) td:first-child:before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    display: block;
    z-index: -1;
    margin: auto;
}
tr:nth-child(2) td:first-child:before {
    background: cyan;
    left: 0;
    right: 50%;
}
tr:nth-child(2) td:first-child:after {
    background: blue;
    left: 50%;
}