3

テーブル ヘッダーの角を丸くして 1 ピクセルの境界線にすることはできますか?

境界線を適用すると、丸みを帯びた角には適用されませんが、実際の表の境界線には適用されるため、境界線の角は正方形です。

これどうやってするの？

CSSは次のとおりです。

.example th {
border: 1px solid #ddd;
background: #444;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
background: -moz-linear-gradient(top,  #eee,  #ddd);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd');
color: #444;
    }

丸みを帯びた角は最初とリストの子 th に適用されます: -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; ボーダー半径: 6px 0 0 0;

4

4 に答える 4

4

これにより、すべてのthテーブル ヘッダー (ボディ セルの代わりにセマンティック セルを使用している場合td) の角が丸くなりますが、選択したテーブルのみを対象とする場合は、クラスの名前を に変更し、それらのテーブルにクラスをtable.rounded th追加するだけです。rounded

th
{ 
-khtml-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-ms-border-radius: 4px 4px 4px 4px;
-o-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: solid 1px black;
}

編集：border-collapse: separate;これを可能にするには、テーブルに置く必要があります...

于 2012-06-05T20:11:18.277 に答える
0

各 th 内に div コンテナを追加してみてください。

例: http://jsfiddle.net/y6VNe/5/

<table>
   <tr>
       <th><div>A</div></th>
       <th><div>B</div></th>
       <th><div>C</div></th>
       <th><div>D</div></th>
   </tr>
</table>

CSS

th div{
   border:1px solid black;
   width:80px;    
   text-align:center;
   border-radius: 10px;
}​
于 2012-06-05T20:10:57.763 に答える
-3

border-radiusと呼ばれる角を丸くするための CSS3 プロパティがあります。

ここにあなたを助けるはずのリンクがあります：

http://www.yourhtmlsource.com/tables/roundedcorners.html

そして、ここに素晴らしい説明のある別のものがあります：

http://davidwalsh.name/css-rounded-corners

于 2012-06-05T20:09:54.113 に答える