Question

我想要一张桌子，其中一些单元格已经打破边框，而其他单元格则有连续的边框。例如，这是一个四列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;
}

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

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

仅将连续边框添加到表的页眉和页脚

1 个答案: