tr border-bottom 표시되지 않음

Question

DataGrid를 만들려고하는데 두 가지 문제가 발생했습니다.

나는 국경 붕괴 (border-collapse)를 사용해야했다. 위에 모서리를 둥글게하는 것. 하지만 그렇게함으로써 나는 트렁크에 경계선을 추가 할 수있는 능력을 잃어 버렸습니다.

통찰력이 있으십니까?

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