Die Eigenschaft border-radius und border-collapse:collapse passen nicht zusammen. Wie kann ich border-radius verwenden, um eine reduzierte Tabelle mit abgerundeten Ecken zu erstellen?

Question 1

Ich versuche, mit CSS eine Tabelle mit abgerundeten Ecken zu erstellen border-radius Eigentum. Die Tabellenstile, die ich verwende, sehen in etwa so aus:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Hier ist das Problem. Ich möchte auch die einstellen border-collapse:collapse Eigentum, und wenn das eingestellt ist border-radius funktioniert nicht mehr. Gibt es eine CSS-basierte Methode, mit der ich denselben Effekt erzielen kann border-collapse:collapse ohne es tatsächlich zu nutzen?

Es scheint, dass ein großer Teil des Problems darin besteht, dass das Einrichten des Tisches mit abgerundeten Ecken die Ecken der Ecke nicht beeinflusst td Elemente. Wenn der Tisch alle eine Farbe hätte, wäre das kein Problem, da ich einfach die Ober- und Unterseite machen könnte td abgerundete Ecken für die erste bzw. letzte Reihe. Allerdings verwende ich unterschiedliche Hintergrundfarben für die Tabelle zur Unterscheidung der Überschriften und für die Umrandung, also das Innere td Elemente würden auch ihre abgerundeten Ecken zeigen.

Den Tisch mit einem anderen Element mit runden Ecken zu umgeben, funktioniert nicht, weil die eckigen Ecken des Tisches “durchbluten”.

Wenn Sie die Rahmenbreite auf 0 festlegen, wird die Tabelle nicht reduziert.

Unterseite td Ecken immer noch quadratisch, nachdem der Zellenabstand auf Null gesetzt wurde.

Die Tabellen werden in PHP generiert, sodass ich einfach eine andere Klasse auf jedes der äußeren th/tds anwenden und jede Ecke separat stylen könnte. Ich würde dies lieber nicht tun, da es nicht sehr elegant und ein bisschen mühsam ist, es auf mehrere Tabellen anzuwenden, also kommen Sie bitte mit Vorschlägen weiter.

Ich möchte dies ohne JavaScript tun.

Question 2

Ich habe es herausgefunden. Sie müssen nur einige spezielle Selektoren verwenden.

Das Problem beim Abrunden der Ecken des Tisches war, dass die td Elemente wurden auch nicht abgerundet. Sie können das lösen, indem Sie Folgendes tun:

table tr:last-child td:first-child {
    border: 2px solid orange;
    border-bottom-left-radius: 10px;
}
    
table tr:last-child td:last-child {
    border: 2px solid green;
    border-bottom-right-radius: 10px;
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Jetzt rundet alles einwandfrei, außer dass da noch das Thema ist border-collapse: collapse alles kaputt machen.

Ein Workaround ist zu hinzufügen border-spacing: 0 und belassen Sie die Standardeinstellung border-collapse: separate auf den Tisch.

Question 3

Die folgende Methode funktioniert (getestet in Chrome) mit a box-shadow mit einer Verbreitung von 1px statt einer “echten” Grenze.

    table {
        border-collapse: collapse;
        border-radius: 30px;
        border-style: hidden; /* hide standard table (collapsed) border */
        box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
    }

    td {
        border: 1px solid #ccc;
    }

<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Baz</td>
      <td>Qux</td>
    </tr>
    <tr>
      <td>Life is short</td>
      <td rowspan="3">and</td>
    </tr>
    <tr>
      <td>Love</td>
    </tr>
    <tr>
      <td>is always over</td>
    </tr>
    <tr>
      <td>In the</td>
      <td>Morning</td>
    </tr>
  </tbody>
</table>

Question 4

Wenn Sie eine reine CSS-Lösung wünschen (keine Notwendigkeit, cellspacing=0 im HTML), die 1px-Ränder zulässt (was Sie mit der border-spacing: 0 Lösung), bevorzuge ich Folgendes:

Stellen Sie ein border-right und border-bottom für Ihre Tabellenzellen (td und th)
Geben Sie die Zellen in der erste Reihe a border-top
Geben Sie die Zellen in der erste Spalte a border-left

Verwendung der first-child und last-child Selektoren, runden Sie die entsprechenden Ecken für die Tabellenzellen in den vier Ecken ab.

Sehen Sie hier eine Demo.

Angesichts des folgenden HTML:

SIEHE Beispiel unten:

   
table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 350px;
}
table tr th,
table tr td {
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  padding: 5px;
}

table tr th:first-child,
table tr td:first-child {
  border-left: 1px solid #bbb;
}
table tr th:first-child,
table tr td:first-child {
  border-left: 1px solid #bbb;
}
table tr th {
  background: #eee;
  text-align: left;
  border-top: solid 1px #bbb;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

<div>
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

Question 5

Hast du es mal mit versucht table{border-spacing: 0} anstatt table{border-collapse: collapse} ???

Question 6

Sie müssen wahrscheinlich ein anderes Element um den Tisch legen und dieses mit einem abgerundeten Rand gestalten.

Die Arbeitsentwurf gibt das an border-radius gilt nicht für Tabellenelemente, wenn der Wert von border-collapse ist collapse.

Question 7

Wie Ian sagte, besteht die Lösung darin, die Tabelle in einem div zu verschachteln und so festzulegen:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

Mit overflow:hiddendie eckigen Ecken bluten nicht durch das div.

Question 8

Nach meinem besten Wissen wäre die einzige Möglichkeit, dies zu tun, alle Zellen wie folgt zu ändern:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

Und dann den Rand unten und rechts hinten zu bekommen

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-child ist in ie6 nicht gültig, aber wenn Sie verwenden border-radius Ich nehme an, es ist dir egal.

BEARBEITEN:

Nachdem Sie sich Ihre Beispielseite angesehen haben, scheint es, dass Sie dies möglicherweise mit Zellabständen und -auffüllungen umgehen können.

Die dicken grauen Ränder, die Sie sehen, sind eigentlich der Hintergrund der Tabelle (Sie können dies deutlich sehen, wenn Sie die Randfarbe in Rot ändern). Wenn Sie den Zellenabstand auf Null setzen (oder gleichwertig: td, th { margin:0; }) verschwinden die grauen “Ränder”.

BEARBEITEN 2:

Ich finde keine Möglichkeit, dies mit nur einer Tabelle zu tun. Wenn Sie Ihre Kopfzeile in eine verschachtelte Tabelle ändern, können Sie möglicherweise den gewünschten Effekt erzielen, aber es ist mehr Arbeit und nicht dynamisch.