使用rowspan后如何显示行底边框？

时间：2016-09-27 12:04:23

标签： html5 css3 html-table css-tables

我用HTML创建了一个表格，我在其中使用了rowspan来根据它们所属的“类别”对不同的“程序”进行分类。我现在正试图通过在CSS中使用border-bottom来按顺序分割每个“类别”部分。

这是我想要的：

What I want

但这是我目前得到的：

What it looks like now

1。为什么tbody tr的底部边框根本不显示？

2。如何在每个“程序”部分结束后才显示底部边框？

这是我目前拥有的HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Price List</title>
        <link rel="stylesheet" href="css/table.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
    </head>
    <body>
        <table>
            <caption>Price List</caption>
            <thead>
                <tr>
                    <th scope="col">Category</th>
                    <th scope="col">Procedure</th>
                    <th scope="col">Price (PLN)</th>
                    <th scope="col">Price (&euro;)</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="4">These prices are valid until 31.12.2016.</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <th rowspan="2">Diagnostics</th>
                    <th scope="row">Dental Consultation</th>
                    <td>100</td>
                    <td>25</td>
                </tr>
                <tr>
                    <th scope="row">Dental Checkup</th>
                    <td>200</td>
                    <td>50</td>
                </tr>
                <tr>
                    <th rowspan="2">Cosmetic Dentistry</th>
                    <th scope="row">Teeth Cleaning</th>
                    <td>200</td>
                    <td>50</td>
                </tr>
                <tr>
                    <th scope="row">Teeth Whitening</th>
                    <td>800</td>
                    <td>200</td>
                </tr>
                <tr>
                    <th rowspan="3">Conservative Dentistry</th>
                    <th scope="row">Tooth Filling</th>
                    <td>200</td>
                    <td>50</td>
                </tr>
                <tr>
                    <th scope="row">Root Canal</th>
                    <td>1000</td>
                    <td>250</td>
                </tr>
                <tr>
                    <th scope="row">Tooth Extraction</th>
                    <td>500</td>
                    <td>125</td>
                </tr>
                <tr>
                    <th rowspan="3">Prosthodontics</th>
                    <th scope="row">Dental Crown</th>
                    <td>1400</td>
                    <td>350</td>
                </tr>
                <tr>
                    <th scope="row">Denture</th>
                    <td>2000</td>
                    <td>500</td>
                </tr>
                <tr>
                    <th scope="row">Dental Bridge</th>
                    <td>2400</td>
                    <td>600</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

这是我目前拥有的CSS：

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    color: grey;
}

table {
    max-width: 960px;
    margin: 10px auto;
    text-align: left;
}

caption {
    font-weight: 700;
    font-size: 2em;
    padding: 20px 0;
}

thead th {
    background: #0073e6;
    color: #fff;
}

tbody tr {
    background: #f2f2f2;
    border-bottom: 1px solid #0073e6; /*despite this, no border is displayed*/
}

tbody td:nth-last-of-type(1),
tbody td:nth-last-of-type(2) {
    text-align: center;
}

tfoot td {
    font-style: italic;
    font-size: 0.75em;
    text-align: left;
    background: white;
}

2 个答案:

答案 0 :(得分：1)

要显示行边框，请在表格上设置border-collapse: collapse。

我们可以通过选择：

来设置正确的边框
  • 每一行都有rowspan
  • 与rowspan
    • 在同一行中的每一行
  • 每个td与rowspan
    • 位于同一行

  • tfoot元素

    tbody [rowspan],
tbody [rowspan] ~ th,
tbody [rowspan] ~ td,
tfoot {
  border-top: 1px solid #0073e6;
}

并设置顶部边框。我们可以使用general sibling selector (~)。

执行此操作

实施例

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: 'Lato', sans-serif;
  color: grey;
}
table {
  max-width: 960px;
  margin: 10px auto;
  text-align: left;
  border-collapse: collapse;
}
caption {
  font-weight: 700;
  font-size: 2em;
  padding: 20px 0;
}
thead th {
  background: #0073e6;
  color: #fff;
}
tbody tr {
  background: #f2f2f2;
}
tbody [rowspan],
tbody [rowspan] ~ th,
tbody [rowspan] ~ td,
tfoot {
  border-top: 1px solid #0073e6;
}
tbody td:nth-last-of-type(1),
tbody td:nth-last-of-type(2) {
  text-align: center;
}
tfoot td {
  font-style: italic;
  font-size: 0.75em;
  text-align: left;
  background: white;
}
<table>
  <caption>Price List</caption>
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Procedure</th>
      <th scope="col">Price (PLN)</th>
      <th scope="col">Price (&euro;)</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="4">These prices are valid until 31.12.2016.</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th rowspan="2">Diagnostics</th>
      <th scope="row">Dental Consultation</th>
      <td>100</td>
      <td>25</td>
    </tr>
    <tr>
      <th scope="row">Dental Checkup</th>
      <td>200</td>
      <td>50</td>
    </tr>
    <tr>
      <th rowspan="2">Cosmetic Dentistry</th>
      <th scope="row">Teeth Cleaning</th>
      <td>200</td>
      <td>50</td>
    </tr>
    <tr>
      <th scope="row">Teeth Whitening</th>
      <td>800</td>
      <td>200</td>
    </tr>
    <tr>
      <th rowspan="3">Conservative Dentistry</th>
      <th scope="row">Tooth Filling</th>
      <td>200</td>
      <td>50</td>
    </tr>
    <tr>
      <th scope="row">Root Canal</th>
      <td>1000</td>
      <td>250</td>
    </tr>
    <tr>
      <th scope="row">Tooth Extraction</th>
      <td>500</td>
      <td>125</td>
    </tr>
    <tr>
      <th rowspan="3">Prosthodontics</th>
      <th scope="row">Dental Crown</th>
      <td>1400</td>
      <td>350</td>
    </tr>
    <tr>
      <th scope="row">Denture</th>
      <td>2000</td>
      <td>500</td>
    </tr>
    <tr>
      <th scope="row">Dental Bridge</th>
      <td>2400</td>
      <td>600</td>
    </tr>
  </tbody>
</table>

答案 1 :(得分：0)

在表格中添加border-collapse：

table {
    max-width: 960px;
    margin: 10px auto;
    text-align: left;
    border-collapse: collapse
}

将一个类添加到您想要边框的tr

相关问题
最新问题