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 つのセルを含む新しい行を追加します

css クラスが非表示の最初のセルに colspan="3" を追加し、このセルの境界線を削除します

2 番目の呼び出しを通常どおりに処理します。

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 に答える