底部有单个单元格的 HTML 表格

Question

我得到了一个 html 表格，基本上看起来像这样 ( http://jsfiddle.net/LMaQq/ ):

<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td><input type="checkbox"></td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td><input type="checkbox"></td>
        </tr>
    </tbody>
</table>

我现在要做的是仅在Col 4 下添加一个新的表格单元格。在 Col 1 到 Col 3 下应该没有任何东西。所以它应该是这样的:

这样做的背景是，我想要在现有复选框下方添加一个复选框，这样我就可以同时选择/取消选择所有这些复选框。我怎样才能做到这一点？

Answer 1

检查这个 jsfiddle http://jsfiddle.net/LMaQq/7/

CSS

table {
    width: 100%;
    border-spacing: 0;
}

td, th {
    border-top: 1px solid black;
    border-right: 1px solid black;
    text-align: center;
}

tr td:first-child,
tr th:first-child {
    border-left: 1px solid black;
}

tr:last-child td {
    border-left: 0;
    border-right: 0;
}

tr:last-child td:nth-child(3) {
    border-right: 1px solid black;
}

tr:last-child td:last-child {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

希望这能满足您的要求。