2

丸いボーダーテーブルを作ろうとしています。しかし、境界線にはほとんど問題がなく、テーブルの境界線は丸められていません..

grid1 { width:100%; border:1px solid #000}

ここに例があります http://jsfiddle.net/NHNFx/

<table class="grid1"> 
    <tr>
        <th>Salutation</th>
        <td>MR</td>
    </tr>
    <tr>
        <th>First Name</th>
        <td>Greg</td>
    </tr>
    <tr>
        <th>Last Name</th>
        <td>Oden</td>
    </tr> 
</table> 

table { border-collapse:collapse; border-spacing:0; border:0; }


.grid1 { width:100%; border:1px solid #000}
.grid1 tr th { width:115px; padding:20px; background:blue; border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;}  
.grid1 tr td { padding:20px; background:#f9f9f9; border-bottom:1px solid #c8c8c8; } 

.grid1 tr:first-child th  { border-radius:2em 0 0 0;   }
.grid1 tr:last-child th  {  border-radius:0 0 0 2em ;  }
.grid1 tr:first-child td:last-child  { border-radius:0 2em 0 0; }
.grid1 tr:last-child td:last-child  {  border-radius:0 0 2em 0 ;  }

助けてください...

4

2 に答える 2

4

border-collapseとにかく使用している場合は、境界線が丸くなるのを防ぐプロパティを削除する必要があるため、テーブルborder-spacing: 0;に使用する必要はありませんborder-collapse

デモ

于 2013-06-11T07:46:02.300 に答える
1

これを試して

table {
    border-collapse: separate;
    border-spacing: 0;
}
table, td {
    border: 1px solid #404040;
    border-radius: 7px;
    -moz-border-radius: 7px;
    padding: 7px;
}
于 2013-06-11T07:47:06.527 に答える