Как остановить цвет фона thead от утечки, когда есть закругленные углы?

Question

У меня есть стол с закругленными углами. Я указал другой цвет фона только для thead.

Во всех браузерах, кроме Firefox, цвет фона просачивается через закругленный угол. Я установил overflow на hidden, но это, похоже, не помогает.

Как я могу остановить утечку цвета фона через закругленный угол стола?

Вот код: https://codepen.io/ayushn21/pen/OJVRMgG

Спасибо!

Answer 1

Вы должны установить border-radius ( в верхнем левом углу и в верхнем правом углу ) для соответствующего th ячейки ( первый и последний ребенок соответственно ). Поэтому просто добавьте следующее к CSS вашего примера Codepen .

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

Попробуйте его в приведенном ниже фрагменте кода.

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>

Answer 2

Вы можете добавить border-top-left-radius:10px; и border-top-right-radius:10px; к первой / последней ячейке.

Вы также можете добавить background-clip:padding-box; к этим ячейкам, если это все еще происходит.

Я нашел эти трюки в этой статье CSS -трюки .

Answer 3

Попробуйте:

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

Вы можете сделать то же самое для последней строки:

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

Answer 4

Вы можете добавить cellspacing="0" к <table>, чтобы удалить пространство между таблицей и ячейками. Это также решит проблему с радиусом границы: <th>:

<table cellspacing="0"></table>