當使用背景顏色時邊框消失

我試圖設置一個從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; 
}

你可以從這裏找到這個問題的codepen：https://codepen.io/OPaiTaCa/pen/rjowYm

任何幫助將非常感激。

來源

2017-02-13 David Morales

你的HTML表結構是沒有意義的。你爲什麼不像每個普通表一樣有一個''？ – andi

@andi說什麼。這就是所謂的而不是。 – BoltClock

@andi因爲我從JSON文件獲取動態數據並使用需要我像這樣構建表的框架。 –

通過改變

display: table-row-group;

固定這

display: inline-table;

來源

2017-02-13 19:20:21

當使用背景顏色時邊框消失

回答

相關問題