CODEWITHSUNDEEP
htmlcss
PierBJX
PierBJX

Reputation: 2353

Bottom border on thead overlaps border in tbody tr with collapse border in table

I'm using a table in HTML and I wanted to set a bit of style. I added a bottom-border to the thead of my table and there is an active class for tbody tr which adds a border.
However, the bottom-border of the thead overlaps the border-top of the active class.

It's because of the collapse border, but I need it because the hover on tbody tr does not work properly. Indeed, it adds gaps between each columns.

How could I solve this ?

Here is the code:

table {
  border-collapse: collapse;
  cursor: default;
}

table thead {
  border-bottom: 2px solid;
  text-align: center;
}

table thead th {
  font-weight: normal;
}

table th,
table td {
  padding: 5px 10px;
}

table tbody tr:hover {
  background-color: grey;
}

table tbody tr.active {
  border: 1px solid blue;
}
<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
      <td>G</td>
      <td>H</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 385

Answers (1)

PierBJX
PierBJX

Reputation: 2353

Finally, I found the trick. I add a :before to the tbody and a box-shadow instead of border-bottom for the thead.

table {
  border-collapse: collapse;
  cursor: default;
}

table thead {
  box-shadow: 0 2px grey;
  text-align: center;
}

table thead th {
  font-weight: normal;
}

table th,
table td {
  padding: 5px 10px;
}

table tbody tr:hover {
  background-color: grey;
}

table tbody tr.active {
  border: 1px solid blue;
}

table tbody:before {
  line-height: 0px;
  content: "\200C";
  display: block;
}
<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
      <td>G</td>
      <td>H</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions