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

Question

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

通过CSS实现这一目标有直接的结果吗？

Answer 1

选项一

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

display: inline-block和vertical-align: top可以让他们保持一致。

Example!

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

CSS

* {
    margin: 0;
    padding: 0;
}

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

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

td div {
    height: 100px;
    width: 50px;
    background: blue;
    display: inline-block;  
    vertical-align: top;
}

td div:first-child {
    background: green;
}

---

选项二

使用colspan。

Example with colspan

HTML

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

CSS

* {
    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;
}

Answer 2

我喜欢为此目的在表中创建表， 这是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>

<强> JSFiddle DEMO - Table in Table

Answer 3

你走了：

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%;
}

使用生成的内容不需要额外的标记。

小提琴：http://jsfiddle.net/wck4j6g4/