tr不顯示border-bottom

Question

我試圖創建一個datagrid，並偶然發現了兩個問題。我不得不使用border-collapse：separate;去頂部的圓角。 但是通過這樣做，我失去了在tr botton上添加邊框的能力。

任何見解？

http://fiddle.jshell.net/KNb7K/

CSS：

table.dgrid { 
    border: solid 1px #CDCDCD; 
    .border-radius(8px, 0px, 0px, 8px); 
    width: 100%; 
    border-collapse: separate; 
} 
table.dgrid th:first-child{ 
    .border-radius(0px, 0px, 0px, 8px); 
} 

table.dgrid th:last-child{ 
    .border-radius(8px, 0px, 0px, 0px); 
} 

table.dgrid th{ 
    background-color: #E6E6E6; 
} 
table.dgrid tr th:last-child, table.dgrid tr td:last-child{ 
    border-right: 0px; 
} 
table.dgrid tbody tr:last-child { 
    border-bottom: 0; 
} 
table.dgrid tr { 
    border-bottom: solid 1px #CDCDCD; 
    border-collapse: collapse ; 
} 
table.dgrid th, table.dgrid td { 
    padding: 5px; 
    text-align: center; 
    vertical-align: middle; 
    border-right: solid 1px #CDCDCD; 
} 

HTML：

<table class="dgrid"> 
    <thead> 
     <tr> 
      <th>Ativar</th> 
      <th>Imagem</th> 
      <th>Posição</th> 
      <th>Link</th> 
      <th>Excluir</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td></td> 
      <td></td> 
      <td><input type="text" /></td> 
      <td></td> 
     </tr> 
       <tr> 
      <td><input type="checkbox" /></td> 
      <td></td> 
      <td></td> 
      <td><input type="text" /></td> 
      <td></td> 
     </tr> 
       <tr> 
      <td><input type="checkbox" /></td> 
      <td></td> 
      <td></td> 
      <td><input type="text" /></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

你可以把table.dgrid th, table.dgrid td的bottom-border，然後我會更新table.dgrid tbody tr:last-child有td在那裏像這樣：table.dgrid tbody tr:last-child td。

Answer 2

從table.dgrid刪除border-collapse: separate;。

Answer 3

這個工程：

table.dgrid { 
    width: 98%; 
    border-collapse: separate; 
    border-bottom: solid 1px #CDCDCD; 
    margin:1%; 
} 
table.dgrid th:first-child{ 
    border-top-left-radius: 8px; 
} 
table.dgrid th:first-child, table.dgrid td:first-child{ 
    border-left: solid 1px #CDCDCD; 
} 
table.dgrid th:last-child{ 
    border-top-right-radius: 8px; 
} 
table.dgrid th{ 
    background-color: #E6E6E6; 
} 
table.dgrid tbody tr:last-child { 
    border-bottom: 0; 
} 
table.dgrid th, table.dgrid td { 
    padding: 5px; 
    text-align: center; 
    vertical-align: middle; 
    border-top: solid 1px #CDCDCD; 
    border-right: solid 1px #CDCDCD; 
}