css - Border dissapearing when using background-color


Keywords:css 


Question: 

I'm trying to setup a table that receives data from a JSON file and then renders it. My HTML is the following:

  <thead>
    <tr>
        <th>Failme</th>
        <th>Ano</th>
        <th>Gênero</th>
        <th>Ranking</th>
        <th>Espectadores</th>
        <th>receita</th>
      </tr>
  </thead>
  <tbody>
          <tr>
              <td>7 Pecados Rurais</td>
              <td>Comboio Noturno para Lisboa</td>
              <td>RPG</td>
              <td>Bairro</td>
</tr>...

The table is being displayed properly, however, when I add a background-color to the nth child, it hides the border. I've tried to play around with margins, as can be seen, but it doesn't fix the issue, as these rows keep getting dissaligned from the main table.

table.content {
 width: 100%;
    border: 1px solid black;
  border-collapse: collapse;

 }
 tbody tr {background-color: white; display: table-cell; border: 1px solid black; }
 tbody td {display: table-row-group; 
    text-align: center; 
    width: 100%; 
    margin-left:-2px;
  border-right: 1px solid black;

   float:left;}

th{
  border-bottom: 1px solid black;
  padding: 5px;
}
 td:nth-child(odd) {
    background: #eee;

   border-left: 1px solid black;
}

You can find the codepen for this issue here:

Any help would be much appreciated.


1 Answer: 

Fixed this by changing

display: table-row-group; 

to

display: inline-table;