7

<tbody/>のように、背景と丸い境界線を設定したい

tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }

ただし、Codepenでこれを試してみると、境界線と背景色は表示されますが、<tbody/>まだ角が直角です。

:last-childたとえば、一連のおよびセレクターを使用して、コーナーの:first-child個々の に半径を適用することで、この問題を回避できます。td

tbody tr:first-child td:first-child { border-top-left-radius: 15px; }

このバージョンは、私が望むことを-moz-(少なくとも、firefox では) 実行しますが、非常に冗長でハックな感じも-webkit-し<th/>ます<td/>。この動作を取得するための簡潔で純粋な css の方法はありますか?

4

1 に答える 1

6

表の境界線を折りたたんだと仮定すると、 を設定display:blockしてtbodyを適用するだけborder-radiusです。

コードペンの例

CSS

table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    width: 600px;
}

tbody {
    background: #ccf;
    border: 1px solid black;
    border-radius: 15px;
    display: block;
}

th, td {
    width: 200px;
}

td, th {
    padding: 5px;
    text-align: center;
}
于 2013-11-03T19:02:44.627 に答える