Abgerundete Tabellenecken nur CSS

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

Ich habe eine einfache alte HTML-Tabelle. Ich will runde Ecken dafür, ohne mit Bildern oder JS, dh rein Nur CSS. So was:

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

Bisher habe ich das:

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 mir keine Grenzen für die Zellen. Wenn ich Ränder hinzufüge, werden sie nicht gerundet!

Irgendwelche Lösungen?

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

Bearbeiten: Hier ist eine relativ saubere Umsetzung Ihrer Skizze:

table {
    border-collapse:separate;
    border:solid black 1px;
    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>

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

Für mich die Twitter Bootstrap-Lösung sieht 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 zukünftige 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>

Damit kann man spielen hier (auf jsFiddle)

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

Um die oberen Ecken zu erhalten, stellen Sie den Randradius auf den ersten und letzten Typ von ein th Elemente, und stellen Sie dann zum Schluss den Randradius auf das letzte und das erste ein td Typ auf dem letzten Typ tr um die unteren Ecken zu bekommen.

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

Erstens brauchen Sie mehr als nur -moz-border-radius wenn Sie alle Browser unterstützen möchten. Sie sollten alle Varianten angeben, einschließlich Normal border-radiusfolgendermaßen:

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

Zweitens, um Ihre Frage direkt zu beantworten, border-radius zeigt nicht wirklich einen Rahmen an; Es legt nur fest, wie die Ecken des Randes aussehen, falls vorhanden.

Um die Umrandung zu drehen und somit deine abgerundeten Ecken zu bekommen, brauchst du auch die border Attribut auf Ihrem td und th Elemente.

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

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

Es ist erwähnenswert, dass einige ältere Browser das Putten nicht mögen border-radius auf Tabellen/Tabellenzellen. Es kann sich lohnen, a zu setzen <div> in jeder Zelle und stylen Sie stattdessen diese. Dies sollte jedoch keine aktuellen Versionen von Browsern betreffen (außer IE, der abgerundete Ecken überhaupt nicht unterstützt – siehe unten).

Schließlich nicht, dass IE nicht unterstützt border-radius überhaupt (IE9 Beta tut es, aber die meisten IE-Benutzer werden IE8 oder weniger verwenden). Wenn Sie den IE hacken möchten, um Border-Radius zu unterstützen, schauen Sie sich an http://css3pie.com/

[EDIT]

Okay, das hat mich gestört, also habe ich einige Tests durchgeführt.

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

Es scheint, als ob das Entscheidende, was Sie vermisst haben, war border-collapse:separate; auf dem Tischelement. Dies hindert die Zellen daran, ihre Grenzen miteinander zu verbinden, wodurch sie den Grenzradius aufnehmen können.

Hoffentlich hilft das.

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 Behavior-Tag vorhanden ist, damit es das Plug-In einfügt.

Einfaches Beispiel aus meinem Projekt, das mir abgerundete Ecken, Farbverlauf und Kastenschatten für meinen Tisch 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 CSS-IntelliSense von Visual Studio Ihnen die grüne Unterstreichung für unbekannte Eigenschaften anzeigt, es funktioniert immer noch, wenn Sie es ausführen. Einige der Elemente sind nicht sehr klar dokumentiert, aber die Beispiele sind ziemlich gut, besonders auf der Titelseite.

Es ist ein wenig grob, aber hier ist etwas, das ich zusammengestellt habe, das vollständig aus CSS und HTML besteht.

• Außenecken abgerundet
• Kopfzeile
• Mehrere Datenzeilen

Dieses Beispiel verwendet auch die :hover Pseudoklasse für jede Datenzelle <td>. Elemente können einfach aktualisiert werden, um Ihren Anforderungen gerecht zu werden, und der Hover kann schnell deaktiviert werden.

(Die habe ich aber noch nicht bekommen :hover um für volle Zeilen richtig zu arbeiten <tr>. Die letzte schwebende Zeile wird unten nicht mit abgerundeten Ecken angezeigt. Ich bin sicher, es gibt etwas Einfaches, das ü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>

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

Sie müssen auf die Verwendung von Bildern zurückgreifen, wie in beschrieben dieses Tutorialoder ähnliches 🙂