CODEWITHSUNDEEP
htmlcsshtml-tablecss-tables
pawel123
pawel123

Reputation: 57

How to display row bottom border after using rowspan?

I've created a table in HTML, where I've used rowspan to categorize different "Procedures" based on the "Category" they belong to. I'm now trying to style the table in order split each "Category" section by using border-bottom in CSS.

Here's what I'd like to get:

What I want

But here's what I currently get:

What it looks like now

1. Why is the bottom border of the tbody tr not displaying at all?

2. How can I display the bottom borders only after each "Procedure" section ends?

And here's the HTML that I currently have:

<!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>

And here's the CSS I currently have:

*, *: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;
}

Upvotes: 2

Views: 6743

Answers (2)

misterManSam
misterManSam

Reputation: 24692

In order to show the row borders, set border-collapse: collapse on the table.

We can set the correct borders by selecting:

  • each th with the rowspan
  • each th in the same row as the rowspan
  • each td in the same row as the rowspan

  • the tfoot element

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

and setting a top border. We can do this with the general sibling selector (~).

Example

*,
*: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>

Upvotes: 8

jean-max
jean-max

Reputation: 1654

Add border-collapse in table :

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

And add a class to the tr where you want the border

Upvotes: 0

Related Questions