1

上部の境界線の両側が丸くなっているテーブルを作成しようとしていますが、テーブルの残りの境界線は四角になっています。

この CSS を適用すると、境界線は正方形のままですが、background-color 丸みを帯びて奇妙な外観になります。

table {border-collapse:collapse}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
th.header2 {border-top:1px solid red; border-right:1px solid red; border-top-right-radius:20px}

結果は次のとおりです。 ここに画像の説明を入力

赤い境界線が背景に従うように、左上/右のヘッダーセルの境界線を「丸める」にはどうすればよいですか?

実際の例については、 JSFiddleを参照してください。

4

4 に答える 4

2

変化する：

   table {
    border-collapse: collapse;
}

に：

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

デモ

于 2013-08-08T10:19:56.333 に答える
0

これは、ボーダー プロパティをおよびに割り当てるのではtable tagなく、のみに割り当てることで簡単に解決できます。th tagtd tag

table {
    background: #ccc;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 1px solid red;
}
th {
    width: 70px;
}
th, td {
    text-align: left;
}

http://jsfiddle.net/Tomer123/z5832/9/

于 2013-08-08T10:16:15.547 に答える