7

スニペットhttp://jsfiddle.net/hXMLF/3/では、セルの白い境界線とページの背景の間の隅に小さな境界線が表示されます。どうすればそれを防ぐことができますか?

HTML

<table cellspacing="0" cellpadding="0">
  <tr>
      <td>Test</td>
      <td>Test</td>
  </tr>
</table>​

CSS

body {
    background-color: #efefef;
}

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

td {
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​
4

3 に答える 3

22

私が思いついた解決策は2つあります。ソリューション2を使用しますが、他の誰かにとって他の状況で役立つ可能性があるため、ここでもソリューション1を保持しています。

解決策1:表示

td表示をに変更するとinline-blockうまくいきますが、他の場所で実際のコンテンツに影響を与える可能性があります...

td {
    display: inline-block; /* this has been added */
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​

これが、ソリューション1用に変更されたJSFiddleです。

解決策2:背景クリップ(推奨)

しかし、とにかくCSS3を使用しているので、これはさらに優れたソリューションです。

td {
    background-clip: padding-box; /* this has been added */
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​

これが、ソリューション2用に変更されたJSFiddleです。

すべてのブラウザで機能しない場合は、ブラウザ固有の設定が-moz-background-clipあり、異なる値のセットを使用することに注意してください(基本的に、、およびからボックス-webkit-background-clipを省略します)border-boxpadding-boxcontent-box

于 2012-11-22T14:22:46.980 に答える
1

これは、

border-collapse: separate;

そのようにします。テーブルはスタイリングのプリマドンナ<div>ではないので、代わりにタグを使用することをお勧めします。

これを試してください:http ://jsfiddle.net/hXMLF/9/

于 2012-11-22T14:21:19.190 に答える
0

このリンクを確認してください。丸い角のセルのCSSを生成できます。

http://cssround.com/

例:

<div 
style="
width:400px;
height:300px;
-webkit-border-radius: 0px 26px 0px 0px;
-moz-border-radius:    0px 26px 0px 0px;
border-radius:         0px 26px 0px 0px;
background-color:#C2E3BF;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;
-moz-box-shadow:    #B3B3B3 2px 2px 2px;
box-shadow:         #B3B3B3 2px 2px 2px;
">

Just modify width and height values to get what you need...

</div>
于 2013-07-12T11:00:58.320 に答える