CSS3 border-radius auf dem display:table-row-element

Dies ist mein layout:

<div class="divContainer">
        <div class="item">
            <div class="itemHeader"></div>
            <div class="itemBody"><div>
            <div class="itemFlag"></div>
        </div>
        ....
</div>

Und CSS:

.divContainer{
    display:table;
    border-spacing:0 5px; //bottom spacing
    width:100%;
}

.item{
    display:table-row;
    height:45px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
}

.itemHeader, .itemBody, .itemFlag{
    display:table-cell;
}

.itemHeader{
    width:100px;
}

.itemBody{
    width:150px;
}

.itemFlag{
    width:20px;

}

Die Runde Grenzen erscheinen nicht auf der item Elemente.
Wenn ich Sie separat in itemHeader und itemFlag Sie angezeigt werden.
Aber ich möchte wirklich klar, code und setzen Sie Sie in die item

Kann auch nicht den radius zu arbeiten, auf die divContainer Klasse. Ich möchte eine abgerundete container enthält abgerundete Zeilen.

Was ist das problem? Vielleicht ein anderer Teil von CSS ist messing, aber ich glaube nicht, dass das der Fall ist.

InformationsquelleAutor ZolaKt | 2011-03-07

  1. 21

    Ich befürchte, das es keine Möglichkeit für die Anwendung von border-radius auf Tabellenzeilen. Aber, der workaround ist ziemlich einfach: wenden Sie einfach die Hintergrundfarbe und den border-radius in den Zellen.

    Wenn Sie entfernen die Hintergrundfarbe aus den Zeilen der Tabelle, und Sie können fügen Sie diese:

    .item > div {
  background-color: #ccc;
}

.item > div:first-child {
  border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
}

.item > div:last-child {
  border-radius: 0 10px 10px 0; 
  -moz-border-radius: 0 10px 10px 0;
}

    Es funktioniert sogar, wenn Sie ändern Ihre Klasse Namen.

    Können Sie in Aktion sehen Sie hier:
    http://jsfiddle.net/jaSs8/1/

    InformationsquelleAutor Duopixel

  2. 1

    Du auch dieses Problem beheben können indem Sie die Einstellung float:left; auf das table-element. Es bewirkt nicht das Verhalten der Tabelle Flexibilität aus und funktioniert wie ein Charme.

    table {
 float: left;
 display: table;
 width: 100%;
 border-collapse: collapse;
}
tr {
 display: table-row;
 width: 100%;
 padding: 0;
}
td {
 font-weight: bold;
 background: #fff;
 display: table-cell;
 border-radius: 10px;
}

    InformationsquelleAutor directory

  3. 0

    Vielleicht ist das problem in divContainer Klasse. Versuchen Sie, um die Anzeige zu ändern-Attribut-Tabelle-Zeile.

    Ich kann nicht eine Tabellenzeile innerhalb einer Tabelle-Zeile. Es muss ein table-element

    InformationsquelleAutor Guilherme de Jesus Santos

Schreibe einen Kommentar