Tabellenkopf mit abgerundeten Ecken und Rahmen

Question

Ist es möglich, dass eine Tabellenüberschrift abgerundete Ecken hat? et einen 1px-Rahmen?

Wenn ich einen Rahmen auf die th Elementen sind die Ecken des Rahmens quadratisch statt rund.

table {
  border-collapse: collapse;
}

th {
  background: cyan;
  border: 1px solid;
}

th:first-child {
  border-radius: 10px 0 0 0;
}

th:last-child {
  border-radius: 0 10px 0 0;
}

td {
  border: 1px solid;
}

<table>
  <tr><th>Col 1</th><th>Col 2</th></tr>
  <tr><td>a</td><td>b</td></tr>
  <tr><td>c</td><td>d</td></tr>
</table>

Answer 1

Dies macht alle Tabellenköpfe (wenn Sie die semantische th Zellen anstelle des Körpers td Zellen) haben abgerundete Ecken, aber wenn Sie dies nur für ausgewählte Tabellen wünschen - dann benennen Sie die Klasse um in table.rounded th und fügen Sie einfach rounded Klasse zu diesen Tabellen:

th { 
    -khtml-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -ms-border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    border: solid 1px black;
}

EDITAR: müssen Sie haben border-collapse: separate; auf Ihrem Tisch, damit dies möglich ist...

Answer 2

Hinzufügen einer <div> Umschlag innerhalb jedes <th> . Fügen Sie Ihre Rahmenstile zu den Umschlägen hinzu.

table {
  border-collapse: collapse;
}

th {
  padding: 0;
}

th div {
  background: cyan;
  border: 1px solid;
  width: 80px;
}

th:first-child div {
  border-radius: 10px 0 0 0;
}

th:last-child div {
  border-radius: 0 10px 0 0;
}

<table>
  <tr>
    <th><div>Col 1</div></th>
    <th><div>Col 2</div></th>
    <th><div>Col 3</div></th>
    <th><div>Col 4</div></th>
  </tr>
</table>

Answer 3

Sie können verwenden box-shadow um die Grenze zu fälschen:

box-shadow: 0px 0px 2px #ddd inset;

Dies führt allerdings zu einer helleren Farbe als bei normalen Rändern, so dass Sie dies ausgleichen müssen.