仅向表格的页眉和页脚添加连续边框答案

【问题标题】：Adding continuous border to only header and footer of table仅向表格的页眉和页脚添加连续边框
【发布时间】：2018-08-03 21:29:57
【问题描述】：

我想要一个表格，其中一些单元格的边界断开，而其他单元格的边界连续。例如，这是一个 4 列 12 行表格的 html：

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

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

【问题讨论】：

张贴你所追求的照片。

标签： html css html-table border

【解决方案1】：

您可能必须将它放在两个不同的表中，第一个包含tr.header 的内容，cellspacing="0"，第二个包含默认值。但是，这意味着您必须添加 CSS 以保持宽度一致，这可能是一个问题，具体取决于您放入表中的内容。如果这不是问题，下面是所有列都设置为 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;
}

【讨论】：