CSS3 des border-radius Eigenschaft und border-collapse: collapse nicht mischen. Wie kann ich border-radius verwenden, um einen zusammengeklappten Tisch mit abgerundeten Ecken zu schaffen?

https://stackoverflow.com/questions/628301

06-07-2019
|

Frage

Bearbeiten - Originaltitel: Gibt es eine alternative Art und Weise border-collapse:collapse in CSS (um einen zusammenbrach, abgerundete Ecke Tisch zu haben)

zu erreichen?

Da es stellt sich heraus, dass nur die Tabellen Grenzen immer nicht zum Einsturz nicht das eigentliche Problem lösen, ich den Titel besser aktualisiert haben, um die Diskussion zu reflektieren.

Ich versuche, einen Tisch mit abgerundeten Ecken zu machen die CSS3 border-radius Eigenschaft. Die Tabellenstile Ich verwende in etwa so aussehen:

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

Hier ist das Problem. Ich möchte auch die border-collapse:collapse Eigenschaft setzen, und wenn das gesetzt border-radius nicht mehr funktioniert. Gibt es eine CSS-basierte Art, wie ich die gleiche Wirkung wie border-collapse:collapse bekommen kann, ohne sie tatsächlich zu verwenden?

Edits:

Ich habe eine einfache Seite, das Problem zu demonstrieren hier (Firefox / Safari nur) .

Es scheint, dass ein großer Teil des Problems ist, dass die Tischdeko abgerundete Ecken nicht über die Ecken der Ecke td Elemente beeinflussen. Wenn der Tisch war alle eine Farbe, wäre dies kein Problem sein, da ich nur die oberen und unteren td Ecken jeweils für die erste und die letzte Zeile abgerundet machen könnte. Ich bin jedoch unterschiedliche Hintergrundfarben für die Tabelle mit den Überschriften und für Striping zu unterscheiden, so dass die inneren td Elemente würden ihre abgerundeten Ecken als auch zeigen.

Zusammenfassung der vorgeschlagenen Lösungen:

mit einem anderen Element der Tabelle Umgebung mit runden Ecken funktioniert nicht, weil die Tabellen quadratische Ecken „Durchbluten.“

Festlegen Randbreite auf 0 die Tabelle nicht kollabieren.

Unten td Ecken noch Platz nach Cellspacing auf Null.

JavaScript verwendet instead- durch die Vermeidung des Problems arbeitet.

Mögliche Lösungen:

Die Tabellen werden in PHP erzeugt, so konnte ich nur eine andere Klasse zu jedem des äußeren th / tds und Stil jede Ecke separat anzuwenden. Ich würde lieber nicht tun, da es nicht sehr elegant ist und ein bisschen nervig, um mehrere Tabellen anzuwenden, so wenden Sie sich bitte halten Vorschläge kommen.

Mögliche Lösung 2 verwenden JavaScript (jQuery, speziell), um die Ecken zu stylen. Diese Lösung funktioniert auch, aber immer noch nicht ganz das, was ich suche (ich weiß, ich bin pingelig). Ich habe zwei Vorbehalte:

ist dies eine sehr leichte Website, und ich möchte JavaScript auf das absolute Minimum halten
ein Teil des Reizes, dass mit border-radius für mich hat, ist Graceful Degradation und progressive Verbesserung. border-radius für alle abgerundeten Ecken Durch die Verwendung, ich hoffe, eine gleich bleibend abgerundete Seite in CSS3-fähigen Browser zu haben und eine gleich bleibend Platz Website in anderen (Ich suche dich an, IE).

Ich weiß, dass der Versuch, dies heute mit CSS3 tun kann unnötig erscheinen, aber ich habe meine Gründe. Ich mag auch darauf hinweisen, dass dieses Problem ein Ergebnis der W3C-Spezifikation ist, nicht schlecht CSS3-Unterstützung, so dass jede Lösung immer noch relevant und nützlich sein, wenn CSS3 verbreitete Unterstützung hat.

Lösung

ich es herausgefunden. Sie müssen nur einige spezielle Selektoren.

Das Problem mit den Ecken des Tisches Runden war, dass die td-Elemente auch abgerundet nicht worden. Sie können das lösen, indem sie so etwas wie dies zu tun:

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

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

Jetzt rundet alles richtig, außer, dass es nach wie vor die Frage der border-collapse: collapse bricht alles. Eine Abhilfe ist cellspacing="0" in dem HTML-Code zu setzen, statt (danke, Joel ).

Andere Tipps

Die folgende Methode funktioniert (getestet in Chrome) durch einen box-shadow mit einem Spread von 1px anstelle einer „echten“ Grenze verwendet wird.

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;
}

Wenn Sie eine CSS-only Lösung (keine Notwendigkeit zu setzen cellspacing=0 im HTML) möchten, die für 1px Grenzen erlaubt (die Sie nicht mit der border-spacing: 0 Lösung tun können), ziehe ich folgendes zu tun:

Stellen Sie einen border-right und border-bottom für Ihre Tabellenzellen (td und th)
Geben Sie die Zellen in der ersten Zeile ein border-top
Geben Sie die Zellen in der ersten Spalte ein border-left
Verwenden des first-child und last-child Selektoren, um die entsprechenden Ecken für die Tabellenzellen in den vier Ecken.

eine Demo finden Sie hier.

In Anbetracht der folgende HTML:

siehe Beispiel unten:

   

 .custom-table{margin:30px;}
    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 th:last-child{
    border-top:solid 1px      #bbb;}
    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;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td: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 class="custom-table">
    <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>

Haben Sie versucht, mit table{border-spacing: 0} statt table{border-collapse: collapse} ???

Sie werden wahrscheinlich ein anderes Element um den Tisch und Stil, dass mit einem abgerundeten Rand setzen müssen.

Die Arbeitsentwurf gibt an, dass border-radius nicht auf Tabellenelemente gilt, wenn der Wert von border-collapse ist collapse.

Als Ian sagte, die Lösung Nest ist der Tisch in einem div und setzen Sie es wie folgt aus:

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

Mit overflow:hidden werden die rechtwinkligen Ecken nicht durch die div bluten.

Nach bestem Wissen und Gewissen, der einzige Weg, es wäre tun könnten alle Zellen zu modifizieren, etwa so:

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

Und dann die Grenze auf den Grund zu gehen und gleich wieder

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 border-radius verwenden Ich nehme an, Sie kümmern sich nicht.

EDIT:

Nachdem bei Ihrem Beispiel Seite suchen, scheint es, dass Sie in der Lage sein können, um diese mit dem Zellabstand und Polsterung zu arbeiten.

Die dicken grauen Grenzen Sie tatsächlich der Hintergrund der Tabelle sehen sind (Sie können dies deutlich sehen, wenn Sie die Rahmenfarbe auf rot). Wenn Sie den Cellspacing auf Null (oder äquivalent: td, th { margin:0; }) gesetzt. Die grauen „Grenzen“ verschwindet

EDIT 2:

Ich kann nicht einen Weg, dies zu tun mit nur einem Tisch. Wenn Sie Ihre Kopfzeile zu einer verschachtelten Tabelle ändern, könnten Sie möglicherweise in der Lage sein, um den gewünschten Effekt zu bekommen, aber es wird mehr Arbeit, und nicht dynamisch.

habe ich versucht, eine Abhilfe mit dem Pseudo-Elementen :before und :after auf dem thead th:first-child und thead th:last-child

In Kombination mit der Tabelle mit einem <div class="radius borderCCC"> Einwickeln

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

finden Sie unter jsFiddle

für mich in Chrom Works (13.0.782.215) Lassen Sie mich wissen, ob dies für Sie in anderen Browsern funktioniert.

Ich hatte das gleiche Problem. entfernen border-collapse vollständig und verwenden: cellspacing="0" cellpadding="0" in dem HTML-Dokument. Beispiel:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Eigentlich können Sie Ihre table in einem div als Wrapper hinzuzufügen. und dann ordnen Sie diese CSS Codes Wrapper:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

Die gegebenen Antworten funktionieren nur, wenn es keine Grenzen um den Tisch herum sind, die sehr einschränkend ist!

Ich habe ein Makro in SASS, dies zu tun, die vollständig extern unterstützt und Binnengrenzen, die gleiche Optik wie border-collapse zu erreichen: Zusammenbruch, ohne es tatsächlich angeben.

Getestet in FF / IE8 / Safari / Chrome.

Gibt schöner runde Grenzen in reiner CSS in allen Browsern, aber IE8 (degradiert anmutig), da IE8 nicht border-radius unterstützt: (

Einige ältere Browser können Anbieter Präfixe erfordern mit border-radius zu arbeiten, so fühlen sich frei hinzufügen diese Präfixe, um Ihren Code wie nötig.

Diese Antwort ist nicht die kürzeste -. Aber es funktioniert

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

diesen Stil anwenden zu können einfach ändern Sie Ihre

<table>

-Tag auf die folgenden:

<table class="roundedTable">

und sicher sein, die oben genannten CSS-Stile in Ihrem HTML-Code enthalten.

Hope, das hilft.

Für eine umrandete und scrollbaren Tabelle, verwenden Sie diese (ersetzen Variablen, $ Texte Start)

Wenn Sie thead, tfoot oder th verwenden, ersetzen Sie einfach tr:first-child und tr-last-child und td mit ihnen.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Ich schrieb gerade eine verrückte Menge von CSS für diese, die perfekt zu funktionieren scheint:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

Lösung mit border-collapse: getrennt für Tisch und Display. Inline-table für tbody und thead

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

Ich bin hier mit HTML und CSS, und ich war auch für Lösung dafür suchen, hier, was ich finde.

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

Ich versuche es, erraten, was es funktioniert:)

Gefunden diese Antwort nach in das gleiche Problem läuft, fand aber es ist ziemlich einfach: der Tabellenüberlauf geben: versteckt

Keine Notwendigkeit für ein Verpackungselement. Zugegeben, ich weiß nicht, ob dies vor 7 Jahren gearbeitet haben würde, wenn die Frage zunächst gefragt wurde, aber es funktioniert jetzt.

Tabelle mit abgerundeten Ecken und mit Zellen eingefaßt. Mit @Ramon Tayag Lösung.

Der Schlüssel ist, zu verwenden, border-spacing: 0 , wie er betont.

Lösung mit SCSS .

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

Ich begann Experiment mit "Anzeige" und ich fand heraus, dass: border-radius, border, margin, padding, in einem table angezeigt werden mit:

display: inline-table;

Zum Beispiel

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Aber wir brauchen eine width jeder Spalte

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

Hier ist ein aktuelles Beispiel dafür, wie eine Tabelle mit abgerundeten Ecken von zu implementieren http://medialoot.com/preview/css-ui-kit/demo.html . Es basiert auf dem speziellen Selektoren von Joel Potter oben vorgeschlagen. Wie Sie sehen können, enthält es auch etwas Magie ein wenig glücklich zu machen IE. Es enthält einige zusätzliche Arten, die Farbe der Zeilen wechseln:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

ich immer auf diese Weise unter Verwendung von Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

Border-Radius wird nun offiziell unterstützt. Also, in allen oben genannten Beispielen Ihnen den „-moz-“ Präfix fallen können.

Ein weiterer Trick ist die gleiche Farbe für die oberen und untere Reihen zu verwenden, wie Sie Ihre Grenze. Bei allen drei Farben gleich, fügt es sich in und sieht aus wie ein perfekt abgerundetes Tisch, obwohl es nicht physisch ist.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow