Abrunden der Ecken von HTML-Tabelle Körper

Hier ist ein fiddle Abrunden der Ecken von HTML-Tabelle Körper

Mein Versuch, die Ecken eines tbody Element abzurunden ist ergebnislos geblieben.

Ich war die Ecken eines tr Element in der tbody mit dem folgenden

CSS

.tr .rounded-corners { 

    height: 225px; 
    width: 250px; 
    display: inline-block; 
    padding: 10px; 
    margin-top: 10px; 
    box-shadow: 2px 2px 7px #888888; 
    border-radius: 7px; 
    cursor: pointer; 
    cursor: hand; 
}

jedoch abrunden können, wenn ich versuche, die Ecken mit tbody einen ähnlichen Stil zu tun sind nicht gerundet?

.tbody .rounded { 

    background: red; 
    border-radius: 7px; 
}

Der Hintergrund erscheint rot.

Quelle

2014-12-22 TT4M.C

können Sie die HTML-Post? – jmore009

Verwenden Sie etwas wie jsfiddle würde sehr hilfreich sein, und würde eher dazu führen, dass Ihre Frage beantwortet wird. –

Sie können den Tbody nicht begrenzen. Sie müssen den Grenzradius auf das Tabellenelement setzen. Auf dieser Seite finden Sie weitere Informationen: http://codepen.io/anon/pen/xiaCc, eine andere Frage gefunden: http://stackoverflow.com/questions/19756736/is-there-a-clean-way- to-get-grenzt an ein tbody-in-pure-css. Es legt die Grenzen der angrenzenden Zellen fest. (Nicht immer wünschenswert, aber ein Workaround). – Mouser

Wenn Ihre Tabelle auf border-collapse: separate (Standardeinstellung) eingestellt ist, wird der Grenzradius je nach Browser möglicherweise auf <tbody> oder nicht angewendet. Das Verhalten ist in den Spezifikationen nicht definiert.

Nach den Angaben — CSS Backgrounds and Borders Module Level 3 (Hervorhebung von mir):

Die Wirkung von border-radius auf interne Tabellenelemente undefiniert in CSS3 Hintergründe und Grenzen, sondern kann in einer zukünftigen definiert werden Spezifikation. CSS3 UAs sollten ignoriert Rand-Radius-Eigenschaften angewendet auf interne Tabellenelemente, wenn "Grenze-Kollaps" ist "Kollaps".

Für konsistente Ergebnisse, basierend auf dem Beispiel würden Sie die tbody-display: blockas suggested in this answer setzen müssen. Dies wird das Tabellenverhalten etwas brechen, könnte aber nützlich sein.

Quelle

2014-12-22 03:58:21 misterManSam

dies versuchen.,

.bodytable { 
    background:blue; 
    border-radius: 7px; 
    display: inline-block; 
}

Quelle

2014-12-22 05:02:42 Sathish

Abrunden der Ecken von HTML-Tabelle Körper

Antwort

Verwandte Themen