1

我有一个 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下不应该有任何东西。所以它应该是这样的：

在此处输入图像描述

这样做的背景是，我想要在现有的复选框下有另一个复选框，它允许我同时选择/取消选择所有这些复选框。我怎样才能做到这一点？

4

6 回答 6

3

检查这个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;
}

希望这符合您的要求。

于 2013-09-11T13:00:38.713 回答
2

将一些类添加到您不想显示的所有这些字段中，并在该类集中 visibility:hidden

于 2013-09-11T12:51:43.107 回答
1

在表格底部添加一个包含 2 个单元格的新行

将 colspan="3" 添加到第一个隐藏 css 类的单元格，然后删除此单元格上的边框

像往常一样对待第二个电话。

HTML：

<table cellspacing="0">
<thead>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
    </tr>
</thead>
    <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>
    <tr>
        <td colspan="3" class="hidden"></td>
        <td><input type="checkbox" /></td>
    </tr>
<tbody>
</tbody>

CSS：

table {border-top:1px solid black; border-right:1px solid black;}
td,th {border-left:1px solid black; border-bottom:1px solid black; padding:10px; margin:0px;}
td.hidden {border-left:0px; border-bottom:0px;}

http://jsfiddle.net/RNuFU/

于 2013-09-11T12:53:48.000 回答
1 
<tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td class="b"><input type="checkbox"/></td>
        </tr>
    </tbody>
.b{
    border: 1px solid black;
    text-align: center;
}

查看jsfiddle，希望您的问题得到解决。

于 2013-09-11T12:55:03.093 回答
0

这是小提琴

在您的表格中添加以下 HTML 代码

<tr>
   <td class="four" colspan=3></td>
   <td class="five"><input type="checkbox"></td>
</tr>

在 CSS 中

.four{
    border-top:1px solid black;
    visibility:hidden;
}
.five {
    border-top:1px solid black;
}
于 2013-09-11T12:53:37.277 回答
0

我什至会把它放在一个 tfoot 部分。如果您想使用 jQuery 选中/取消选中 tbody 内的所有复选框，将会更容易

    <tfoot>
        <td colspan="3" />
        <td><input type="checkbox"></td>
    </tfoot>
于 2013-09-11T12:55:52.613 回答