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

316

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.

Vamin
quelle
2
Könnten Sie die Tabelle nicht in ein Div einwickeln, den Randradius und "Überlauf: versteckt" auf dem Div festlegen? Ich habe es gerade getestet und das funktioniert einwandfrei, es sei denn, Sie müssen in einem Div mit fester Breite / Höhe scrollen / erweitern oder die Eltern, die dies tun.
Ian
Der letzten CSS-Anweisung fehlt meines Erachtens ein Semikolon.
JensG
3
Diese Frage wurde 2009 gestellt. Ich bin ein wenig überrascht, dass es 2015 keine besseren Lösungen als die unten aufgeführten gibt. W3C hätte dies vor einigen Jahren beheben sollen.
Jonathan M

Antworten:

240

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.

Vamin
quelle
75
Warum nicht border-spacing: 0;als Rahmenstil hinzufügen, anstatt mit HTML herumzuspielen ?
Ramon Tayag
3
Ich hatte ein Problem beim Festlegen der Hintergrundfarbe des TR-Tags anstelle des TD-Tags. Stellen Sie sicher, dass Sie die Hintergrundfarbe des TD und nicht des TR einstellen, wenn Sie Ihren Tisch streifen.
Will Shaver
Nun , was passiert , wenn Sie zu haben , Hintergrundfarbe verwenden auf der TR? Ist das überhaupt möglich?
Mohoch
1
Nur hinzufügen border-spacing: 0;wie Ramon empfehlen, es für mich behoben. Stellen Sie sicher, dass Sie die border-radiusund border-spacing-Stile zu den <th>oder <td>-Elementen hinzufügen , nicht zu <thead>oder <tbody>.
Gavin
1
Ich benutze Bootstrap und habe die Lösung anhand von Ramons Rat gefunden:border-spacing: 0; border-collapse: separate;
Caner SAYGIN
84

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;
}
cmrd.Kaash
quelle
5
Dies ist das einzige, was für mich funktioniert hat. Es ist jedoch schwierig, die richtige Farbe für den Tabellenrand zu finden.
Thomas Ahle
Es ist nicht verwendbar, wenn Ihre Tabelle eine andere Hintergrundfarbe als die Umgebung hat.
g.pickardou
1
Vielen Dank für Ihren Code, es funktioniert auch mit Firefox 26.0
maxivis
1
@ g.pickardou dieses Problem kann durch Hinzufügen von 'overflow: hidden' zum Tabellenelement behoben werden.
Val
Box-Shadow vergrößert den Tisch und die Seiten werden jetzt abgeschnitten.
Ray
62

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>

NullUserException
quelle
1
Bitte schreiben Sie Antworten, die (permanenten) Code enthalten. Wenn die Antwort viel Code enthält, posten Sie einfach die relevanten Bits und erklären Sie, warum sie relevant sind.
Samuel Harmer
3
Dies ist eine großartige Lösung, aber es war etwas schwer zu lesen. Ich habe einige der Stilregeln umgeschrieben und eine Erklärung des Codes hinzugefügt, also hoffentlich hilft das.
Michael Martin-Smucker
Wenden Sie auch einen Radius auf die Tabelle an, oder es sieht seltsam aus, wenn Sie einen Hintergrund auf die Tabelle selbst anwenden.
Ziege
Was hat die table.InfoKlasse mit irgendetwas zu tun?
Pylinux
28

Haben Sie versucht, table{border-spacing: 0}anstelle von table{border-collapse: collapse}???

Cesar
quelle
Vielen Dank, damit kann ich das tun, was ich tun musste (was eine Reihe von TH-Elementen oben außerhalb des Feldes "Abgerundete Ecke" mit allen TDs unten beinhaltete)
RonLugge
12
Das Problem dabei border-spacing: 0ist, dass Sie keinen 1px-Rand haben können, oder? Weil sich die Ränder stapeln anstatt zu kollabieren.
Michael Martin-Smucker
1
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;ergab genau das, was ich brauchte.
Milad.Nozari
23

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.

user59200
quelle
Das habe ich auch in Betracht gezogen, aber wenn ich ein Div erstelle, um den Tisch zu umgeben und abgerundete Ecken zu setzen, bluten die quadratischen Tischecken immer noch durch. Siehe das neu veröffentlichte Beispiel.
Vamin
Der beste Kompromiss, den ich finden konnte, war das Hinzufügen eines THEAD-Blocks zur Tabelle und das Anwenden des grauen Hintergrunds (mit #eee auf der Tabelle selbst). Die Kopfzellen liefen stattdessen vor dem Rand der TABELLE über. Dann habe ich den Tabellenrand auf 3px erhöht, um den Überlauf zu verbergen.
user59200
3
@ Vamin "bluten durch" - nicht wenn Sie verwendenoverflow:hidden;
Brian McCutchon
In dieser Situation kann jeder meine Lösung von unten auf dieser Seite verwenden. B2n.ir/table-radius
AmerllicA
15

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.

Chris
quelle
Denken Sie daran, wer es verwenden möchte, dass bei overflow: hiddenjedem Popover / Tooltip die Wrapper-Abmessungen abgeschnitten werden.
user776686
7

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.

Joel
quelle
Ich habe ein Beispiel mit cellspacing = 0 hinzugefügt, und es ist viel näher. Die unerwünschten Ränder verschwinden, aber die unteren Ecken bluten immer noch aus.
Vamin
Danke nochmal für deine Hilfe. Die Tabellen werden in PHP generiert. Wenn also keine elegante Lösung vorgeschlagen wird, werde ich jeder Ecke eine Klasse zuweisen und sie separat formatieren.
Vamin
6

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.

Adardesign
quelle
5

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;
}
AmerllicA
quelle
4

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.

robbie613
quelle
Sie benötigen keine Präfixe mehr für den Randradius, erwarten Sie für FF 3.6 (-moz). Außerdem wird -khtml sicherlich nicht mehr benötigt.
Jonatan Littke
@ JonatanLittke, Sie können die Antwort jederzeit bearbeiten, wenn Sie der Meinung sind, dass sie verbessert werden kann. Ich habe alle Präfixe entfernt und einen Link zu caniuse.com hinzugefügt, damit die Leute ihre eigenen Entscheidungen über Präfixe für treffen können border-radius.
Michael Martin-Smucker
4

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>
Brauliobo
quelle
4

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">
Lars
quelle
Dies funktioniert, erfordert jedoch, dass Sie anschließend die Tricks von firstchild / lastchild verwenden, um den Effekt zu erzielen.
Thomas Ahle
4

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 !*/
Rev.
quelle
3

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;        
}
Tommer
quelle
Es gibt keinen Grund, diese Antwort im Community-Wiki zu erstellen. Wenn Sie dies tun, erhalten Sie von Ihrer Antwort keinen Ruf.
Tacaswell
3

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 :)

Ahmed Mostafa
quelle
3

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.

Akexis
quelle
Dies ist eine clevere Lösung, aber sie "entfernt" auch die eigentliche Grenze. In Chrome verschwinden der rechte und der untere Rand der Tabelle und alle abgerundeten Ecken haben keinen Rand.
Alex Jorgenson
3

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;
  }
}
Pere Pages
quelle
2

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;
}
Astro
quelle
2

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;
}
Mac Cowell
quelle
1

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

luow
quelle
0

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;
    }
  }
}
Diego Mello
quelle
Ich denke, Sie haben es vielleicht nicht verstanden, er versucht das mit border-collapse: collapseaktiviertem zu tun .
Giovannipds
@giovannipds Schauen Sie sich seine eigene Antwort an (akzeptierte Antwort). Mein Weg ist nur ein anderer Weg. Entfernen Sie nun die "-1".
Diego Mello
Oh, tut mir leid, Sie haben definitiv Recht, mein Fehler, seine akzeptierte Antwort scheint genau dasselbe zu sagen. Ich sollte mich an das halten, was im Titel der Frage geschrieben stand. Er betonte, er wolle einen Grenzzusammenbruch, also ging ich direkt dazu. Ich würde die -1 entfernen, wenn ich könnte, aber ich kann nicht, Sie müssen etwas in der Antwort bearbeiten, um mir das zu erlauben. Versuchen Sie etwas darüber zu erwähnen, dass dies mit nicht möglich ist border-collapse: collapse. Verzeihen Sie noch einmal, ich werde auf Ihr Update warten.
Giovannipds
0

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>

Ανδρέας Μιχελής
quelle
-1

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.

Falke
quelle