Ich habe einen Tisch mit abgerundeten Ecken. Ich habe nur für thead eine andere Hintergrundfarbe angegeben.

In allen Browsern außer Firefox tritt die Hintergrundfarbe durch die abgerundete Ecke aus. Ich habe overflow auf hidden gesetzt, aber das scheint nicht zu helfen.

Wie kann ich verhindern, dass die Hintergrundfarbe durch die abgerundete Ecke des Tisches gelangt?

Hier ist der Code: https://codepen.io/ayushn21/pen/OJVRMgG

Vielen Dank!

0
ayushn21 19 Feb. 2020 im 21:29

4 Antworten

Beste Antwort

Sie müssen die border-radius ( oben links und ) für die entsprechende Einstellung festlegen th Zellen ( erstes und letztes Kind entsprechend ). Fügen Sie einfach Folgendes zum CSS Ihres Codepen-Beispiels hinzu.

  th:first-child {
    border-top-left-radius: 10px;
  }
  th:last-child {
    border-top-right-radius: 10px;
  }

Probieren Sie es im folgenden Snippet aus.

table {
	 border: 1px solid #bcccdc;
	 border-collapse: separate;
	 border-radius: 10px;
	 overflow: hidden;
}
 table td, table th {
	 padding: 10px;
	 vertical-align: middle;
	 border-left: 1px solid #bcccdc;
	 border-top: 1px solid #bcccdc;
}
 table th:first-child {
	 border-top-left-radius: 10px;
}
 table th:last-child {
	 border-top-right-radius: 10px;
}
 table th {
	 font-family: sans-serif;
	 background-color: #f1f5f8;
	 border-top: none;
}
 table td:first-child, table th:first-child {
	 border-left: none;
}
 table tr.section-header {
	 background-color: #eefcf5;
	 font-size: 80%;
	 font-weight: 500;
}
 table caption {
	 font-family: sans-serif;
	 font-style: italic;
	 margin-bottom: 5px;
	 font-weight: 500;
	 text-align: center;
}
<table>
  <caption>A caption</caption>
  <thead>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>    
  </tbody>
</table>
1
Peter Darmis 19 Feb. 2020 im 19:03

Sie können cellspacing="0" zu <table> hinzufügen, um den Abstand zwischen der Tabelle und den Zellen zu entfernen. Dies löst auch Ihr Problem mit dem Randradius mit <th>:

<table cellspacing="0"></table>
0
Julie Xiong 19 Feb. 2020 im 18:40

Sie können den ersten / letzten Zellen border-top-left-radius:10px; und border-top-right-radius:10px; hinzufügen.

Möglicherweise möchten Sie diesen Zellen auch background-clip:padding-box; hinzufügen, falls dies noch geschieht.

Ich habe diese Tricks in diesem CSS-Tricks-Artikel gefunden.

1
Michelle 19 Feb. 2020 im 18:46

Versuche dies:

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

Sie können dasselbe für die letzte Zeile tun:

table {
  tr:last-child td:first-child {
    border-bottom-left-radius: 16px;
  }
  tr:last-child td:last-child {
    border-bottom-right-radius: 16px;
  }
}
1
Sushmit Sagar 19 Feb. 2020 im 18:48