web-dev-qa-db-de.com

tabellenzellenhintergrundfarbe und runde Ecken

Im Snippet http://jsfiddle.net/hXMLF/3/ sehen Sie eine kleine Umrandung an den Ecken zwischen der weißen Umrandung der Zellen und dem Seitenhintergrund. Wie kann ich das verhindern?

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;
}​
htmlcsscss3css-tables
6
Nachtgold

Ich habe zwei Lösungen gefunden. Lösung 2 verwenden aber ich halte auch hier Lösung 1, da sie sich in einer anderen Situation als nützlich erweisen könnte.

Lösung 1: Anzeige

Das Ändern der td-Anzeige in inline-block führt den Trick aus, kann jedoch Auswirkungen auf Ihren tatsächlichen Inhalt an anderer Stelle haben ...

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

Hier ist Ihr geändertes JSFiddle für Lösung 1.

Lösung 2: Hintergrundclip (empfohlen)

Aber da Sie sowieso CSS3 verwenden, ist dies eine noch bessere Lösung:

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

Hier ist Ihr geändertes JSFiddle für Lösung 2.

Wenn dies nicht bei allen Browsern funktioniert, sollten Sie wissen, dass es browserspezifische Einstellungen wie -moz-background-clip und -webkit-background-clip gibt, die einen anderen Satz von Werten verwenden (sie lassen grundsätzlich box aus border-box, padding-box und content-box) aus.

18
Robert Koritnik

Das passiert weil

border-collapse: separate;

macht es so Tabellen sind nicht genau die prima donna beim Styling. Ich empfehle Ihnen, stattdessen <div>-Tags zu verwenden.

VERSUCHEN SIE DIESES: http://jsfiddle.net/hXMLF/9/

1
JDuarteDJ

Überprüfen Sie diesen Link. Sie können CSS für runde Eckzellen generieren.

http://cssround.com/

Beispiel:

<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>
0
ARIJIT