仅向 header 和 table 的页脚添加连续边框

Question

我想要一个 table，其中一些单元格的边界是断开的，而另一些单元格的边界是连续的。例如，这里是四列 12 行的 html table:

    <table>
    <thead>
        <tr class="header">
            <th id="blank_cell"></th> <!-- blank -->
            <th>first_c</th>
            <th>second_c</th>
            <th>third_c</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>row one</th>
            <td>1,1</td>
            <td>1,2</td>
            <td>1,3</td>
        </tr>
        <tr>
            <th>row two</th>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
        </tr>
        <tr>
            <th>row three</th>
            <td>3,1,</td>
            <td>3,2</td>
            <td>3,3</td>
        </tr>
        <tr>
            <th>row four</th>
            <td>4,1</td>
            <td>4,2</td>
            <td>4,3</td>
        </tr>
        <tr>
            <th>row five</th>
            <td>5,1</td>
            <td>5,2</td>
            <td>5,3</td>
        </tr>
        <tr>
            <th>row six</th>
            <td>6,1</td>
            <td>6,2</td>
            <td>6,3</td>
        </tr>
        <tr>
            <th>row seven</th>
            <td>7,1</td>
            <td>7,2</td>
            <td>7,3</td>
        </tr>
        <tr>
            <th>row eight</th>
            <td>8,1</td>
            <td>8,2</td>
            <td>8,3</td>
        </tr>
        <tr>
            <th>row nine</th>
            <td>9,1</td>
            <td>9,2</td>
            <td>9,3</td>
        </tr>
        <tr>
            <th>row ten</th>
            <td>10,1</td>
            <td>10,2</td>
            <td>10,3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>End</th>
            <td>e_one</td>
            <td>e_two</td>
            <td>e_three</td>
        </tr>
    </tfoot>
</table>

我希望 thead 单元格的底部有一个连续的边框（除了第一个空白单元格），同时在其他行上保持一个断开的边框。这是一些 CSS，它在行的底部创建了断开的边框（每行最左边的单元格除外）。

body {
    font-family:Arial,Verdana,sans-serif;
    color:#111111;
}
table {
    width:450px;
}

td,th {
    padding:7px 10px 10px 10px;
}

thead th {
    border-bottom:4px solid #111111;
}

tbody th {
    border-left:2px solid #111111;
    border-right:4px solid #111111;
}

tbody td {
    border-bottom:2px solid #111111;
}

th {
    text-transform:uppercase;
    letter-spacing:0.1em;
    word-spacing:0.3em;
    text-align:left;
}

#blank_cell {
    border:none;
}

tr:hover {
    background-color:#c3e6e5;
}

我希望第一行 - header 行 - 有一条连续的、不间断的线，而我希望其他行保持原样（即断开）。到目前为止，我所能找到的只是应用于整个 table 的样式：例如，我似乎无法折叠边框或仅在 [=23 的 thead 部分的单元格上设置零间距=].因此，如果我使边框连续，它会应用于整个 table.

Answer 1

您可能必须将它放在两个不同的 table 中，第一个包含 tr.header 的内容，其中包含 cellspacing="0"，第二个包含默认值。但是，这意味着您必须添加 CSS 以保持宽度一致，这可能是一个问题，具体取决于您在 table(s) 中输入的内容。如果这不是问题，这里是将所有列设置为 25% 宽度的代码：

(and a JSFiddle)

<body>
<table cellspacing="0">
    <thead>
        <tr class="header">
            <th id="blank_cell"></th> <!-- blank -->
            <th>first_c</th>
            <th>second_c</th>
            <th>third_c</th>
        </tr>
    </thead>
</table>
<table>
    <tbody>
        <tr>
            <th>row one</th>
            <td>1,1</td>
            <td>1,2</td>
            <td>1,3</td>
        </tr>
        <tr>
            <th>row two</th>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
        </tr>
        <tr>
            <th>row three</th>
            <td>3,1,</td>
            <td>3,2</td>
            <td>3,3</td>
        </tr>
        <tr>
            <th>row four</th>
            <td>4,1</td>
            <td>4,2</td>
            <td>4,3</td>
        </tr>
        <tr>
            <th>row five</th>
            <td>5,1</td>
            <td>5,2</td>
            <td>5,3</td>
        </tr>
        <tr>
            <th>row six</th>
            <td>6,1</td>
            <td>6,2</td>
            <td>6,3</td>
        </tr>
        <tr>
            <th>row seven</th>
            <td>7,1</td>
            <td>7,2</td>
            <td>7,3</td>
        </tr>
        <tr>
            <th>row eight</th>
            <td>8,1</td>
            <td>8,2</td>
            <td>8,3</td>
        </tr>
        <tr>
            <th>row nine</th>
            <td>9,1</td>
            <td>9,2</td>
            <td>9,3</td>
        </tr>
        <tr>
            <th>row ten</th>
            <td>10,1</td>
            <td>10,2</td>
            <td>10,3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>End</th>
            <td>e_one</td>
            <td>e_two</td>
            <td>e_three</td>
        </tr>
    </tfoot>
</table>
</body>




body {
    font-family:Arial,Verdana,sans-serif;
    color:#111111;
}
table {
    width:450px;
}

td,th {
    padding:7px 10px 10px 10px;
}

thead th {
    border-bottom:4px solid #111111;
}

tbody th {
    border-left:2px solid #111111;
    border-right:4px solid #111111;
}

tbody td {
    border-bottom:2px solid #111111;
    width: 25%;
}

th {
    text-transform:uppercase;
    letter-spacing:0.1em;
    word-spacing:0.3em;
    text-align:left;
    width: 25%;
}

#blank_cell {
    border:none;
}

tr:hover {
    background-color:#c3e6e5;
}

仅向 header 和 table 的页脚添加连续边框

Adding continuous border to only header and footer of table

html

css

html-table

border