3

このデモでわかるように、テーブルの角 (具体的には右上と左下) が丸く設定されていますが、これらの角は、含まれるセルの背景色によって破られています。

テーブルにいくつか適用しようとしpaddingましたが、それは役に立ちませんでした。余分な列と行を追加してそれらbackground-colorを に設定する唯一のオプションはありtransparentますか?

CSS のみを使用してこれを修正するには (画像や JavaScript を追加しない)?

4

3 に答える 3

9

overflow: hidden;テーブルの CSS ルールに追加して、その内部コンテンツをクリップします。MDN リファレンスには、次のように記載されています。

オーバーフロー CSS プロパティは、コンテンツをクリップするか、スクロール バーをレンダリングするか、ブロック レベル要素のオーバーフロー コンテンツを表示するかを指定します。

テーブルはブロック レベルの要素と見なされるため、このルールが適用されます。

Gecko 駆動のブラウザー (Firefox など) との不一致を解消するには、こちらも適用display: inline-blockしてください。

jsFiddleで更新されたデモを参照してください。

于 2012-11-08T20:30:04.593 に答える
2

このオプションはあなたを助けるかもしれません

table thead tr:first-child td:last-child {
    border-radius: 0 1em 0 0;
}

table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 1em;
}​

http://jsfiddle.net/ZFYvq/10/

また、疑似クラスの代わりにクラスを使用して、それらを目的のセルに追加できます

于 2012-11-08T20:33:54.240 に答える
0

デモフィドル

div関連する境界線の半径プロパティが設定された でテーブルをラップすることをお勧めします。次に例を示します。

div{
    border-top-right-radius: 1em; 
    border-bottom-left-radius: 1em; 
    overflow:hidden;
}

displayテーブルのプロパティをそれ以外のものに設定すると、要素にtable適用される特定のレイアウト ルールが破らtableれ、IE で動作しないなどの予期しない問題が発生することがよくあります。上記は、真にクロス ブラウザーのセマンティック ソリューションである唯一のものです。

注意してください。テーブルの下部にある太い境界線を削除するには、クラスに追加border-bottom:none;しますdiv

于 2014-05-06T13:40:22.897 に答える