Table with transparent border only on tbody

Question

table
{
  background-color: lime;
  border-collapse: collapse;
}

tr 
{ 
  border-width: 0 0 1px 0;
  border-style: solid;
}
tr:last-child 
{
  border: none; // so the last child from thead and tbody dont have border
}

<table>
      <thead>
        <th>Rank</th>
        <th>Player</th>
        <th>Pts</th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>player1</td>
        <td>50</td>
      </tr>
      <tr>
        <td>2</td>
        <td>player2</td>
        <td>40</td>
      </tr>
      <tr>
        <td>3</td>
        <td>player3</td>
        <td>30</td>
      </tr>
      <tr>
        <td>4</td>
        <td>player4</td>
        <td>40</td>
      </tr>
  </tbody>       
</table>

Now, I want a transparent border between the rows, but only the rows within tbody, but not between thead and tbody. First, I tried

table {
  border-collapse: collapse;

  tr { 
      border-width: 0 0 1px 0;
      border-style: solid;
  }
  tr:last-child {
      border: none; // so the last child from thead and tbody dont have border
  }
}

In the case, I get the border on the element I wanted, but it's black and not transparent. Then I tried with border-spacing:

table {
    border-spacing: 0 1px;
    tr:last-child {
        border: none;
        border-spacing: none; //those two don't seem to work
    }
}

Now I have transparent borders, but there are borders before and after the thead as well, which I can't eliminate. So, I have now either: 1. border only in tbody but not between thead and first data row(good), but the borders are not transparent(bad) or 2. transparent border(good), but unwanted border between thead and first data row(bad).

Is there a way to combine this so I have transparent border, but NOT between thead and first data row?

edit: I want the border to be full transparent, but as soon as I set the border-color with rgba(0,0,0,0), the border "disappears". Ok, it doesn't really disappeares, but take the background-color from td(the lightgrey color, which is a rgba value as well) and I have no idea why.

is it this kind of result you look for ? jsfiddle.net/qapmqfau/7 (background-clip + shadow involved since border-spacing is applied from table to every single cells ) You could reset display on tbody but the table-layout of thead and tbody won't match together anymore ... unless column's width is set fixed — G-Cyrillus
hm... I think border-spacing may be what I want because this put a transparent border between rows. The only problem is that border-spacing put a border between thead and the first data row as well. Is there a way to eliminate just this one border? — yangsunny
to eliminate this empty gap from border-spacing, you can drop a shadow os same background color as i did or reset the display to allow border-spacing only in tbody, but then gap will still show at top and bottom of tbody anyway. codepen.io/gc-nomade/pen/Ewxjmd (gap increased and border added to . else, you can insert empty rows in between codepen.io/gc-nomade/pen/GMRJBq — G-Cyrillus
While they are doing it to add a space between the thead and tbody, the same concept would work here, I think: stackoverflow.com/questions/9258754/… — Kevin Powell

Deepu Reghunath Deepu Reghunath · Accepted Answer · 2017-09-12T11:41:17

use border-color: rgba(0,0,0,.5);

<!DOCTYPE html>
<html>
<head>
<style> 
table
{
background:yellow;
border-spacing: 0;
}
 
tbody tr:not(:last-of-type) td
{ 
      border-width: 0 0 5px 0;
      border-style: solid;
      border-color:black;      
      border-color: rgba(0,0,0,.5);
      
}
</style>
</head>
<body>

<table>
  <thead>
    <th>Rank</th>
    <th>Player</th>
    <th>Pts</th>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>player1</td>
    <td>50</td>
  </tr>
  <tr>
    <td>2</td>
    <td>player2</td>
    <td>40</td>
  </tr>
  <tr>
    <td>3</td>
    <td>player3</td>
    <td>30</td>
  </tr>
  <tr>
    <td>4</td>
    <td>player4</td>
    <td>40</td>
  </tr>


</body>
</html>

Table with transparent border only on tbody

4 Answers