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 ? https://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, Sep 12 '17 at 12:52
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, Sep 12 '17 at 12:59
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. https://codepen.io/gc-nomade/pen/Ewxjmd (gap increased and border added to . else, you can insert empty rows in between https://codepen.io/gc-nomade/pen/GMRJBq — G-Cyrillus, Sep 12 '17 at 13:38
While they are doing it to add a space between the thead and tbody, the same concept would work here, I think: https://stackoverflow.com/questions/9258754/spacing-between-thead-and-tbody — Kevin Powell, Sep 12 '17 at 16:40

Deepu Reghunath · Answer 1 · 2017-09-12T12:16:54.700

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>

same problem here as in the other answers. 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 and I have no idea why. — yangsunny, Sep 12 '17 at 12:50

Ovidiu Unguru · Answer 2 · 2017-09-12T12:44:03.490

0

Edit:

A way to achieve this is to use an :after on the tr of the thead, so you can "simulate" a border.

thead {
  background: lime;
  tr:after {
      background: lime;
    content: "";
    height: 2px;
    position: absolute;
    left: 56px;
    top: 77px;
    width: calc(100% - 111px);
  }
}

With this, you can place the "border" on top of the space between thead and the tbody. Obviously, this may not be the best solution, but I couldn't find another way.

Example: https://jsfiddle.net/qapmqfau/6/

edited Sep 12 '17 at 12:44

answered Sep 12 '17 at 11:52

Ovidiu Unguru

756
5
14

not quite, I want the border like in the picture, just not black or any other color. It should be transparent so the background comes through. I tried to modify your code `border-bottom: 2px solid rgba(0,0,0,0)`. but then the border disappeared completely – yangsunny Sep 12 '17 at 12:01
still not quite :-/. If I read the code correctly, it's the same as my second try. When I give thead a bg-color, you can see there is a border between thead and tbody. I don't want that. But I can't eliminate that. https://jsfiddle.net/qapmqfau/5/ – yangsunny Sep 12 '17 at 12:12

score 0 · Answer 3 · answered Sep 12 '17 at 12:18

The problem is that your table has a background color. If you make the border fully transparent, it is transparent, but it won't show you what's behind the table. You're seeing the table's background-color. Also, since you're using a table, any reason you don't just use border-spacing instead?

But rgba(0,0,0,0) for the border color could work as well I suppose.

table
{
  border-spacing: 0 20px;
}

tr 
{ 
  background-color: lime;
}
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>

Like I already said in the original post. I DON'T want the border between thead and tbody, which border-spacing does. And my table does not have background color. the color is on thead(green) and tbody>td(light grey). And as in my other comment. When I try border-color: rgba(0,0,0,0), the border disappeared completely. — yangsunny, Sep 12 '17 at 12:34
I did misunderstand a part, but if you have no background on your table, please don't include one in the code that you supplied with your question. The border is still there, but it's transparent, so you see the background-color of the cell below it. — Kevin Powell, Sep 12 '17 at 16:34

score 0 · Answer 4 · answered Sep 13 '17 at 06:30

Added an empty table row after each row

<!DOCTYPE html>
<html>
<head>
<style> 
table 
{

border-spacing: 0;
border-collapse:collaspe; 
}
 th
 {
  background:pink;
 }
 
tr:nth-child(even) 
{
 background:transparent; 
 height:2px;
}

tr:nth-child(odd)
{
 background:green;  
}

</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></tr>
  <tr>
    <td>2</td>
    <td>player2</td>
    <td>40</td>
  </tr>
  <tr></tr>
  <tr>
    <td>3</td>
    <td>player3</td>
    <td>30</td>
  </tr>
  <tr></tr>
  <tr>
    <td>4</td>
    <td>player4</td>
    <td>40</td>
  </tr>
  


</body>
</html>

Table with transparent border only on tbody

4 Answers4