CSS3s Eigenschaft "Rahmenradius" und "Rand reduzieren": Reduzieren mischen sich nicht. Wie kann ich mit dem Randradius eine reduzierte Tabelle mit abgerundeten Ecken erstellen?

Bearbeiten - Originaltitel: Gibt es einen alternativen Weg, um border-collapse:collapsein zu erreichenCSS (um einen kollabierte, abgerundete Ecke Tisch zu haben)?

Da sich herausstellt, dass das Reduzieren der Tabellenränder das Grundproblem nicht löst, habe ich den Titel aktualisiert, um die Diskussion besser widerzuspiegeln.

Ich versuche mit der CSS3 border-radiusEigenschaft einen Tisch mit abgerundeten Ecken zu machen . Die von mir verwendeten Tabellenstile sehen ungefähr so ​​aus:

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

Hier ist das Problem. Ich möchte auch die border-collapse:collapseEigenschaft festlegen , und wenn dies festgelegt ist, border-radiusfunktioniert es nicht mehr. Gibt es eine CSS-basierte Methode, mit der ich den gleichen Effekt erzielen kann, border-collapse:collapseohne ihn tatsächlich zu verwenden?

Bearbeitungen:

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

Es scheint, dass ein großer Teil des Problems darin besteht, dass das Einstellen der Tabelle auf abgerundete Ecken die Ecken der Eckelemente nicht beeinflusst td. Wenn die Tabelle nur eine Farbe hätte, wäre dies kein Problem, da ich nur die oberen und unteren tdEcken für die erste bzw. letzte Reihe abrunden könnte. Ich verwende jedoch unterschiedliche Hintergrundfarben für die Tabelle, um die Überschriften und Streifen zu unterscheiden, sodass die inneren tdElemente auch ihre abgerundeten Ecken zeigen.

Zusammenfassung der vorgeschlagenen Lösungen:

Das Umgeben des Tisches mit einem anderen Element mit runden Ecken funktioniert nicht, da die quadratischen Ecken des Tisches "durchbluten".

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

Die unteren tdEcken sind nach dem Setzen des Zellenabstands auf Null immer noch quadratisch.

Die Verwendung von JavaScript vermeidet das Problem.

Mögliche Lösungen:

Die Tabellen werden in PHP generiert, daher könnte ich einfach eine andere Klasse auf jedes der äußeren th / tds anwenden und jede Ecke separat formatieren. Ich würde das lieber nicht tun, da es nicht sehr elegant und ein bisschen mühsam ist, es auf mehrere Tabellen anzuwenden. Bitte kommen Sie immer wieder auf Vorschläge.

Mögliche Lösung 2 besteht darin, JavaScript (speziell jQuery) zum Stylen der Ecken zu verwenden. Diese Lösung funktioniert auch, aber immer noch nicht ganz das, wonach ich suche (ich weiß, dass ich wählerisch bin). Ich habe zwei Vorbehalte:

1. Dies ist eine sehr leichte Website, und ich möchte JavaScript auf ein Minimum beschränken
2. Ein Teil der Anziehungskraft, die die Verwendung des Randradius für mich hat, ist eine anmutige Verschlechterung und fortschreitende Verbesserung. Durch die Verwendung des Rahmenradius für alle abgerundeten Ecken hoffe ich, in CSS3-fähigen Browsern eine konsistent gerundete Site und in anderen eine konsistent quadratische Site zu haben (ich sehe Sie an, IE).

Ich weiß, dass der Versuch, dies heute mit CSS3 zu tun, unnötig erscheint, aber ich habe meine Gründe. Ich möchte auch darauf hinweisen, dass dieses Problem auf die w3c-Spezifikation zurückzuführen ist und nicht auf eine schlechte CSS3-Unterstützung. Daher ist jede Lösung weiterhin relevant und nützlich, wenn CSS3 eine breitere Unterstützung bietet.

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

Das Problem beim Abrunden der Tabellenecken war, dass die td-Elemente nicht ebenfalls abgerundet wurden. Sie können das lösen, indem Sie so etwas 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 immer noch darum geht border-collapse: collapse, alles zu zerbrechen.

Eine Problemumgehung besteht darin , die Standardeinstellung hinzuzufügenborder-spacing: 0 und border-collapse: separatein der Tabelle zu belassen.

Die folgende Methode funktioniert (in Chrome getestet), indem ein box-shadowmit einem Spread von 1pxanstelle eines "echten" Rahmens 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 cellspacing=0reine CSS-Lösung wünschen (die nicht im HTML festgelegt werden muss), die 1px-Rahmen zulässt (was Sie mit der border-spacing: 0Lösung nicht tun können ), bevorzuge ich Folgendes:

• Stellen Sie a border-right und border-bottomfür Ihre Tabellenzellen ( tdundth )
• Geben Sie die Zellen in der ersten Zeile aborder-top
• Geben Sie die Zellen in der ersten Spalte aborder-left
• Verwendung der first-child und last-childSelektoren, um die entsprechenden Ecken für die Tabellenzellen in den vier Ecken.

Sehen Sie hier eine Demo.

Angesichts des folgenden 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, table{border-spacing: 0}anstelle von table{border-collapse: collapse}???

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

Der Arbeitsentwurf gibt an, dass border-radiusdies nicht für Tabellenelemente gilt, wenn der Wert von border-collapseist collapse.

Wie Ian sagte, besteht die Lösung darin, den Tisch in einem Div zu verschachteln und so einzustellen:

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

Mit overflow:hiddenbluten die quadratischen Ecken nicht durch das Div.

Nach meinem besten Wissen können Sie dies nur tun, indem Sie alle Zellen wie folgt ändern:

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

Und dann, um die Grenze unten und rechts zurück zu bekommen

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

:last-childist in ie6 nicht gültig, aber wenn Sie verwenden border-radius, gehe ich davon aus, dass es Ihnen egal ist.

BEARBEITEN:

Nachdem Sie sich Ihre Beispielseite angesehen haben, scheint es, dass Sie dies möglicherweise mit Zellenabstand und Auffüllung umgehen können.

Die dicken grauen Ränder, die Sie sehen, bilden tatsächlich den Hintergrund der Tabelle (Sie können dies deutlich sehen, wenn Sie die Rahmenfarbe in Rot ändern). Wenn Sie den Zellenabstand auf Null setzen (oder gleichwertig:td, th { margin:0; } die grauen "Ränder".

EDIT 2:

Ich kann mit nur einem Tisch keinen Weg finden, dies zu tun. Wenn Sie Ihre Kopfzeile in eine verschachtelte Tabelle ändern, können Sie möglicherweise den gewünschten Effekt erzielen, dies ist jedoch arbeitsintensiver und nicht dynamischer.

Ich habe eine Problemumgehung mit den Pseudoelementen :beforeund :afterauf dem thead th:first-childund versuchtthead th:last-child

In Kombination mit dem Umwickeln des Tisches mit einem <div class="radius borderCCC">

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

sehen jsFiddle

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

Eigentlich können Sie Ihr tableInneres divals Wrapper hinzufügen . und weisen Sie diese CSSCodes dann dem Wrapper zu:

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

table {
  border-collapse: collapse;
}

Die gegebenen Antworten funktionieren nur, wenn es keine Ränder um den Tisch gibt, was sehr einschränkend ist!

Ich habe ein Makro in SASS, um dies zu tun, das externe und vollständig unterstützt Innengrenzen das gleiche Design wie Border-Collapse erzielt: Collapse, ohne es tatsächlich anzugeben.

Getestet in FF / IE8 / Safari / Chrome.

Gibt schöne abgerundete Ränder in reinem CSS in allen Browsern, aber IE8 (verschlechtert sich elegant), da IE8 den Rahmenradius nicht unterstützt :(

Einige ältere Browser können Anbieter Präfixe erfordern , um die Arbeit mit border-radius, so fühlen sich frei , diese Präfixe , um Ihren Code nach Bedarf hinzuzufügen.

Diese Antwort ist nicht die kürzeste - aber sie 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;
}

Um diesen Stil anzuwenden, ändern Sie einfach Ihren

<table>

Tag zu folgendem:

<table class="roundedTable">

und stellen Sie sicher, dass Sie die oben genannten CSS-Stile in Ihren HTML-Code aufnehmen.

Hoffe das hilft.

Verwenden Sie diese Option für eine umrandete und scrollbare Tabelle (Variablen ersetzen, $ Texte starten)

Wenn Sie verwenden thead, tfootoder th, ersetzen Sie einfach tr:first-childund tr-last-childund tdmit 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 hatte das gleiche Problem. border-collapsevollständig entfernen und verwenden: cellspacing="0" cellpadding="0" im HTML-Dokument. Beispiel:

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

Ich habe gerade einen verrückten Satz CSS dafür geschrieben, der 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 Randkollaps: getrennt für Tabelle und Anzeige: Inline-Tabelle für Körper und Kopf.

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 neu in HTML und CSS und habe auch nach einer Lösung dafür gesucht, 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, rate mal was es funktioniert :)

Ich habe diese Antwort gefunden, nachdem ich auf dasselbe Problem gestoßen bin, aber es ist ziemlich einfach: Gib einfach den Tabellenüberlauf: versteckt

Kein Verpackungselement erforderlich. Zugegeben, ich weiß nicht, ob dies vor 7 Jahren funktioniert hätte, als die Frage ursprünglich gestellt wurde, aber es funktioniert jetzt.

Tabelle mit abgerundeten Ecken und mit umrandeten Zellen. Verwenden der @ Ramon Tayag- Lösung.

Der Schlüssel ist zu verwenden, border-spacing: 0wie 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 , dass: border-radius, border, margin, padding, in einem tablemit angezeigt werden:

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 müssen widthvon jeder Spalte eine setzen

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

Hier ist ein aktuelles Beispiel für die Implementierung einer Tabelle mit abgerundeten Ecken unter http://medialoot.com/preview/css-ui-kit/demo.html . Es basiert auf den von Joel Potter oben vorgeschlagenen speziellen Selektoren. Wie Sie sehen können, enthält es auch etwas Magie, um den IE ein wenig glücklich zu machen. Es enthält einige zusätzliche Stile, um die Farbe der Zeilen zu ändern:

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

Hier ist ein Weg:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}

<div>
  <table></table>
</div>

Oder

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

Ich mache das immer so mit 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;
    }
  }
}

Die bisher beste Lösung stammt aus Ihrer eigenen Lösung und sieht folgendermaßen aus:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

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

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


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Der Grenzradius wird jetzt offiziell unterstützt. In allen obigen Beispielen können Sie also das Präfix "-moz-" löschen.

Ein weiterer Trick besteht darin, für die obere und untere Reihe dieselbe Farbe wie für Ihren Rand zu verwenden. Wenn alle drei Farben gleich sind, fügt es sich ein und sieht aus wie ein perfekt abgerundeter Tisch, auch wenn es nicht physisch ist.