Question

我试图设置一个从JSON文件接收数据然后呈现它的表。我的HTML如下：

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

正在正确显示表格，但是，当我向第n个孩子添加背景颜色时，它会隐藏边框。我可以看到，我尝试使用边距，但它并没有解决问题，因为这些行不断与主表不一致。

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;
}

您可以在此处找到此问题的代码堆：https://codepen.io/OPaiTaCa/pen/rjowYm

非常感谢任何帮助。

Answer 1

通过更改

来解决此问题

display: table-row-group;

到

display: inline-table;

使用背景颜色时边框消失

1 个答案: