1

タブのような外観にするために、td要素の場合は角を丸めてtr要素の場合はborder-bottomをテーブルに結合しようとしています（html構造を変更することはできません）。

デモ： http： //jsfiddle.net/VvdBQ/

コード：

table#one {width:100%;border-spacing:0;border-collapse:separate;}
tr {border-bottom:5px solid red;}
td {font-weight:bold;text-align:center;background:blue;border-radius:15px 15px 0 0;border:1px solid green;}

私の問題（Chromeで表示）：

  • border-collapse:separate角は正しく丸められていますが、下の境界線が表示されません
  • それはborder-collapse:collapse反対です

角と下の境界線の両方を正しくするにはどうすればよいですか？

4

1 に答える 1

1

を使用border-collapse:separate;し、スタイルをすべてに移動すると、tdこれで必要なものを取得できるはずです。

td {
    font-weight:bold;
    text-align:center;
    background:blue;
    border-bottom:5px solid red;
    border-top:1px solid green;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

ここにフィドル： http： //jsfiddle.net/digthedoug/qjLyZ/

于 2013-02-01T19:55:09.437 に答える