Скругление углов внутри таблицы

Рейтинг: 2Ответов: 2Опубликовано: 21.08.2023

Каким образом можно закруглить эту часть таблицы, всю таблицу сделал, но этот момент не могу понять как неужели нужно использовать псевдоэлемент?

Таблица

<table>
  <thead>
      <tr>
          <th></th>
      <th>Вышивка<br>
          на одежде
      </th>
      <th>Вышивка<br>
          на крое<br>
          и ткани
      </th>
      <th>Вышивка<br>
          на кепках
      </th>
      <th>Шевроны,<br>
          нашивки
      </th>
  </tr>
</thead>
<tbody>
      <tr>
          <td>до 5 см</td>
          <td>26 ₽</td>
          <td>24 ₽</td>
          <td>28 ₽</td>
          <td>22 ₽</td>
      </tr>
      <tr>
          <td>5-10 см</td>
      <td>16 ₽</td>
      <td>14 ₽</td>
      <td>18 ₽</td>
      <td>12 ₽</td>
  </tr>
      <tr>
      <td>10-15 см</td>
      <td>14 ₽</td>
      <td>12 ₽</td>
      <td>16 ₽</td>
      <td>10 ₽</td>
  </tr>
      <tr>
      <td>15-35 см</td>
      <td>12 ₽</td>
      <td>10 ₽</td>
      <td>14 ₽</td>
      <td>10 ₽</td>
  </tr>
</tbody>
css html
Источник: Stack Overflow на русском

Ответы

▲ 4

body {
  background: antiquewhite;
  margin: 1em;
}

table {
  width: 100%;
  background: orange;
  border-radius: 1em;
  overflow: hidden;
  border-collapse: collapse;
  text-align: center;
}

th, td {
  padding: .5em;
}

td {
  background: white;
}

tr:first-child > td:first-of-type {
  border-top-left-radius: .75em;
}
<table>
  <thead>
    <tr>
      <th></th>
      <th>Вышивка<br>на одежде</th>
      <th>Вышивка<br>на крое<br>и ткани</th>
      <th>Вышивка<br>на кепках</th>
      <th>Шевроны,<br>нашивки</th>
    </tr>
  </thead>
  <tbody>
    <tr><th>до 5 см<td>26 ₽<td>24 ₽<td>28 ₽<td>22 ₽</tr>
    <tr><th>5-10 см<td>16 ₽<td>14 ₽<td>18 ₽<td>12 ₽</tr>
    <tr><th>10-15 см<td>14 ₽<td>12 ₽<td>16 ₽<td>10 ₽</tr>
    <!--<tr><th>15-35 см<td>12 ₽<td>10 ₽<td>14 ₽<td>10 ₽</tr>-->
  </tbody>
</table>

▲ 0

Используйте стили CSS для закругления углов:

<table style=" border-radius: 15px; border-style: solid;"> ... </table>