Nur abgerundete Tischecken CSS

85

Ich habe gesucht und gesucht, konnte aber keine Lösung für meine Anforderung finden.

Ich habe eine einfache alte HTML-Tabelle. Ich möchte runde Ecken dafür, ohne Bilder oder JS zu verwenden, dh nur reines CSS . So was:

Tabellenlayout-Skizze

Abgerundete Ecken für Eckzellen und 1pxdicker Rand für die Zellen.

Bisher habe ich Folgendes:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Aber das lässt mich ohne Grenzen für die Zellen. Wenn ich Rahmen hinzufüge, werden diese nicht gerundet!

Irgendwelche Lösungen?

html css html-table rounded-corners Vishal Shah
quelle
1
Haben Sie versucht, den TD-Elementen mit moz-border-radius einen Rand hinzuzufügen? Beachten Sie auch, dass dies im IE nicht funktioniert. Der IE zeigt weiterhin gerade Kanten an.
Fermin
Wenn Sie sich die Antworten und Ihre Kommentare ansehen, ist nicht klar, was Sie wollen: Wo möchten Sie abgerundete Ecken? Tabelle, Tabellenzellen, nur Zellen an den Ecken Ihrer Tabelle?
BiAiB
3
Ich denke, es ist ziemlich offensichtlich aus dem Titel der Frage, Tabellenecken
Vishal Shah
@ VishalShah +1 für eine wirklich nützliche Frage. Ich habe blind eine jQuery UI-Klasse mit abgerundeten Ecken verwendet, die für die UI-Widgets entwickelt wurde, aber ich habe sie auf Tabellenelemente angewendet und alles wurde quadratisch. Jetzt kann ich mein jQuery-UI-Thema weiterhin mit einem tabellenbasierten Widget verwenden.
DavidHyogo

Antworten:

88

Scheint in FF und Chrome (haben keine anderen getestet) mit separaten Rahmen gut zu funktionieren: http://jsfiddle.net/7veZQ/3/

Bearbeiten: Hier ist eine relativ saubere Implementierung Ihrer Skizze: 

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}
<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>
Erweitern Sie das Snippet

http://jsfiddle.net/MuZzz/3577/

RoToRa
quelle
Nicht genau das, wonach ich suche. Wenn Sie die Tabellenauffüllung entfernen und den Randradius nur auf die Eckzellen anwenden, erhalten Sie 2 Pixel dicke Ränder, was hässlich ist. Lieber gar keine Grenzen haben.
Vishal Shah
3
Schließen. Die Eckzellen benötigten ebenfalls einen Randradius. jsfiddle.net/JWb4T/1 Jetzt sehen Sie jedoch eine kleine Lücke zwischen der Kante der Eckzellen und der Kante der Tabelle. Kann durch Verringern des Randradius für die Eckzellen behoben werden. Danke: D
Vishal Shah
Ich bin froh, dass du es sortiert hast. Beachten Sie dies first-childund last-childfunktionieren Sie nicht in IE6 / 7/8, aber weniger ein Problem für Sie, da dies auch nicht der Fall ist border-radius. Es bedeutet jedoch, dass Sie CSS3Pie nicht verwenden können, um es im IE zu reparieren - es wird den Randradius korrigieren, aber nicht das erste / letzte Kind.
Spudley
Das Hinzufügen border-collapse: separate;zur Zurb Ink-Vorlage hat es für mich gelöst.
Johan Dettmar
1
Vielleicht sah das vor 7 Jahren gut aus, aber heute verbinden sich die Zellgrenzen nicht mit dieser Lösung, so dass es schrecklich aussieht.
Rtaft
22

Für mich sieht die Twitter Bootstrap Solution gut aus. Es schließt IE <9 aus (keine runden Ecken in IE 8 und niedriger), aber das ist in Ordnung, denke ich, wenn Sie potenzielle Web-Apps entwickeln.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}
<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>
Erweitern Sie das Snippet

Damit kannst du hier spielen (auf jsFiddle)

Lars Schinkel
quelle
17

Erstens benötigen Sie mehr als nur, -moz-border-radiuswenn Sie alle Browser unterstützen möchten. Sie sollten alle Varianten, einschließlich Plain border-radius, wie folgt angeben :

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Zweitens wird zur direkten Beantwortung Ihrer Frage border-radiuskein Rand angezeigt. Es wird nur festgelegt, wie die Ecken des Randes aussehen, falls vorhanden.

Um den Rand einzuschalten und so Ihre abgerundeten Ecken zu erhalten, benötigen Sie auch das borderAttribut für Ihre tdund thElemente.

td, th {
   border:solid black 1px;
}

Sie werden auch die abgerundeten Ecken sehen, wenn Sie eine Hintergrundfarbe (oder Grafik) haben, obwohl es natürlich eine andere Hintergrundfarbe als das umgebende Element geben müsste, damit die abgerundeten Ecken ohne Rand sichtbar sind.

Es ist erwähnenswert, dass einige ältere Browser nicht gerne border-radiusTabellen / Tabellenzellen anlegen. Es kann sich lohnen, <div>in jede Zelle eine zu setzen und diese stattdessen zu stylen. Dies sollte jedoch keine Auswirkungen auf aktuelle Versionen von Browsern haben (außer IE, das abgerundete Ecken überhaupt nicht unterstützt - siehe unten).

Schließlich nicht, dass IE überhaupt nicht unterstützt border-radius(IE9 Beta, aber die meisten IE-Benutzer werden auf IE8 oder weniger sein). Wenn Sie den IE hacken möchten, um den Randradius zu unterstützen, besuchen Sie http://css3pie.com/

[BEARBEITEN]

Okay, das hat mich nervt, also habe ich einige Tests durchgeführt.

Hier ist ein JSFiddle-Beispiel, mit dem ich gespielt habe

Es scheint, als ob das Kritische, das Sie vermisst haben, border-collapse:separate;im Tabellenelement war. Dies verhindert, dass die Zellen ihre Ränder miteinander verbinden, wodurch sie den Randradius erfassen können.

Hoffentlich hilft das.

Spudley
quelle
Um den Code auf ein Minimum zu beschränken, habe ich das browserübergreifende Zeug weggelassen. Wenn ich td und th einen Rand gebe, werden sie nicht gerundet. Ich bekomme gerade Kanten. Könnte Beispiel-CSS-Code für eine Tabelle geben, auf die kein CSS angewendet wurde, was demonstrieren würde, was Sie sagen.
Vishal Shah
@ Vishal Shah - Ich habe meine Antwort nach einigen Tests aktualisiert. Hoffentlich hilft das.
Spudley
Ihr Beispiel zeigt einen Randradius für ALLE Zellen an, wobei ich es nur für die Eckzellen möchte. Dies ist, was ich gesucht habe: jsfiddle.net/JWb4T/1
Vishal Shah
@ Vishal Shah - Ich habe das Problem als das Fehlen einer Rundung irgendwo auf dem Tisch verstanden, anstatt speziell, welche Teile des Tisches gerundet werden sollten. border-collapse:separate;
Ich bin
+1 für diesen Randkollaps: separate Spitze. Das hat mir wirklich geholfen.
DavidHyogo
10

Die ausgewählte Antwort ist schrecklich. Ich würde dies implementieren, indem ich auf die Eckentabellenzellen ziele und den entsprechenden Randradius anwende.

Um die oberen Ecken zu erhalten, legen Sie den Randradius für das erste und letzte vom Typ des th- Elements fest. Stellen Sie zum Abschluss den Randradius für das letzte und das erste vom Typ td am letzten vom Typ tr ein , um die unteren Ecken zu erhalten.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
Luke Flournoy
quelle
Das ist so viel besser als alle anderen Antworten ... Das ist erstaunlich einfach und elegant!
Eric Cote
Froh, dass ich helfen konnte!
Luke Flournoy
Das funktioniert wirklich gut, aber ich habe eine andere Tabelle mit thElementen oben und links in der Tabelle und das funktioniert dafür nicht. Wie gehe ich vor, um die Ecken dieser Art von Tisch abzurunden?
nenur
7

Die beste Lösung, die ich für abgerundete Ecken und anderes CSS3-Verhalten für IE <9 gefunden habe, finden Sie hier: http://css3pie.com/

Laden Sie das Plug-In herunter und kopieren Sie es in ein Verzeichnis in Ihrer Lösungsstruktur. Stellen Sie dann in Ihrem Stylesheet sicher, dass das Behaviour-Tag vorhanden ist, damit das Plug-In eingezogen wird.

Einfaches Beispiel aus meinem Projekt, das mir abgerundete Ecken, Farbverlauf und Kastenschatten für meine Tabelle gibt:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Machen Sie sich keine Sorgen, wenn Ihr Visual Studio CSS Intellisense Ihnen die grüne Unterstreichung für unbekannte Eigenschaften gibt. Es funktioniert immer noch, wenn Sie es ausführen. Einige der Elemente sind nicht sehr klar dokumentiert, aber die Beispiele sind ziemlich gut, insbesondere auf der Titelseite.

Patrick Rodriguez
quelle
6

Durch persönliche expeirence habe ich festgestellt , dass es zu runde Ecken einer HTML - Tabelle nicht möglich Zelle mit reinem CSS. Das Abrunden des äußersten Randes eines Tisches ist möglich.

Sie müssen auf die Verwendung von Bildern wie in diesem Tutorial oder ähnlichem zurückgreifen :)

Kyle
quelle
1
+1, und das gleiche hier, haben kürzlich versucht, dies zu erreichen, aber kein Glück. Musste in ein setzen <div>. ^^,
Ruck
4

Es ist etwas rau, aber hier ist etwas, das ich zusammengestellt habe und das ausschließlich aus CSS und HTML besteht.

  • Äußere Ecken abgerundet
  • Kopfzeile
  • Mehrere Datenzeilen

In diesem Beispiel wird auch die :hoverPseudoklasse für jede Datenzelle verwendet <td>. Elemente können einfach aktualisiert werden, um Ihren Anforderungen zu entsprechen, und der Hover kann schnell deaktiviert werden.

(Ich habe es jedoch noch nicht geschafft :hover, ordnungsgemäß für vollständige Zeilen zu arbeiten <tr>. Die letzte schwebende Zeile wird nicht mit abgerundeten Ecken am unteren Rand angezeigt. Ich bin sicher, dass etwas Einfaches übersehen wird.)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}
<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>
Erweitern Sie das Snippet

K. Parker
quelle
Dies sollte die genehmigte Antwort sein. Danke dir!
Inkarnation
1

Fügen Sie einen <div>Wrapper um die Tabelle hinzu und wenden Sie das folgende CSS an

border-radius: x px;
overflow: hidden;
display: inline-block;

zu diesem Wrapper.

Ubby
quelle
1

Um die brillante Antwort von @luke flournoy anzupassen - und wenn Sie sie nicht thin Ihrer Tabelle verwenden, finden Sie hier das gesamte CSS, das Sie zum Erstellen einer abgerundeten Tabelle benötigen:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
Freeworlder
quelle
0

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
0

Sie können dies versuchen, wenn Sie die abgerundeten Ecken auf jeder Seite der Tabelle möchten, ohne die Zellen zu berühren: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>
Younes Hadry
quelle
0

Beispiel-HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, einfach in CSS konvertiert, verwenden Sie sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Leandro Barbosa
quelle
0

Folgendes habe ich verwendet, das für mich in allen Browsern funktioniert hat, und ich hoffe, es hilft jemandem in der Zukunft:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Natürlich kann der #contentblockTeil nach Bedarf ersetzt / bearbeitet werden, und Sie können die border-radius.htcDatei finden, indem Sie eine Suche in Google oder Ihrem bevorzugten Webbrowser durchführen.

Ansipants
quelle
0

Dies bedeutet css3, dass dies nur von aktuellen Nicht-IE <9-Browsern unterstützt wird.

Schauen Sie hier nach , es leitet die runde Eigenschaft für alle verfügbaren Browser ab

BiAiB
quelle
4
css3please macht im IE nichts für den Randradius. Wenn Sie IE hacken möchten, um den Randradius
Spudley
Ich spreche speziell von gerundeten Eigenschaften für eine Tabelle, nicht von einem anderen Element.
Vishal Shah
0

Zwischen <head>Tags hinzufügen:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

und im Körper:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

Die Zellenfarbe, der Inhalt und die Formatierung sind natürlich zum Beispiel;
Es geht darum, farbgefüllte Zellen innerhalb eines Divs zu beabstanden. Dabei sind die schwarzen Zellenränder / Tabellenränder tatsächlich die div-Hintergrundfarbe.
Beachten Sie, dass Sie den Div-Rand-Radius um etwa 2 Werte größer als die Radien der separaten Zelleneckränder festlegen müssen, um einen glatten Effekt für abgerundete Ecken zu erzielen.

Paul Schuddebeurs
quelle
0

Lektion in Tabellengrenzen ...

HINWEIS: Der folgende HTML / CSS-Code sollte nur im IE angezeigt werden. Der Code wird in Chrome nicht korrekt gerendert!

Wir müssen uns daran erinnern:

  1. Eine Tabelle hat einen Rand: ihre äußere Grenze (die auch einen Randradius haben kann).

  2. Die Zellen selbst haben AUCH Ränder (die auch einen Randradius haben können).

  3. Die Tabellen- und Zellenränder können sich gegenseitig stören:

    Der Zellenrand kann den Tabellenrand durchdringen (dh: Tabellengrenze).

    Um diesen Effekt zu sehen, ändern Sie die CSS-Stilregeln im folgenden Code wie folgt:
    i. Tabelle {Border-Collapse: Separat;}
    ii. Löschen Sie die Stilregeln, die die Eckzellen der Tabelle abrunden.
    iii. Spielen Sie dann mit dem Randabstand, damit Sie die Interferenz sehen können.

  4. Der Tabellenrand und die Zellenränder können jedoch KOLLAPSIERT werden (unter Verwendung von: border-Collapse: Collapse;).

  5. Wenn sie reduziert werden, stören die Zellen- und Tabellenränder auf andere Weise:

    ich. Wenn der Tabellenrand abgerundet ist, die Zellenränder jedoch quadratisch bleiben, hat die Form der Zelle Vorrang und die Tabelle verliert ihre gekrümmten Ecken.

    ii. Wenn umgekehrt die Eckzellen gekrümmt sind, die Tabellengrenze jedoch quadratisch ist, sehen Sie eine hässliche quadratische Ecke, die an die Krümmung der Eckzellen grenzt.

  6. Da das Attribut der Zelle Vorrang hat, können Sie die vier Ecken des Tisches dann wie folgt abrunden:

    ich. Reduzieren von Rändern in der Tabelle (mit: border-Collapse: Collapse;).

    ii. Stellen Sie die gewünschte Krümmung in den Eckzellen der Tabelle ein.
    iii. Es spielt keine Rolle, ob die Ecken des Tisches abgerundet sind (dh sein Randradius kann Null sein). 

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}
			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>
Erweitern Sie das Snippet

IqbalHamid
quelle
-1

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}
Goran Vasic
quelle
Bitte erläutern Sie Ihre Lösung
Srivats Shankar
@SrivatsShankar Ich habe das vor langer Zeit geschrieben, also schätze ich, dass es nach -1 nicht mehr funktioniert. Mein Punkt war, "Randradius" zur <Tabelle> hinzuzufügen, und dann würde "Überlauf: versteckt" die äußeren Ränder vor <td> verbergen. Ich vermute, Sie könnten versuchen, <div>, einem Wrapper für <table>, "border-radius", "border" und "overflow: hidden" hinzuzufügen, und dann innerhalb jedes <td> (I.) Rahmen hinzufügen würde das erste und letzte Element jeder Zeile / Spalte ohne den äußeren Rand machen, da <div> einen abgerundeten Rand haben wird, genau wie auf dem Bild)
Goran Vasic
Meinetwegen. Das macht Sinn. Es gibt nicht das genaue angeforderte Ergebnis, aber ich verstehe Ihren Standpunkt. Wenn Sie Ihre Antwort bearbeiten könnten, könnte ich meine Punktzahl ändern. :-)
Srivats Shankar