1

Сделал таблицу представленную кодом.
border-collapse: collapse; устанавливает одинарную рамку.
border-radius: 10px; устанавливает закругления

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

Вопрос: Как я могу сделать закругления, установив при этом одинарную рамку?

table {
    text-align: center;
    border: 1px solid grey;
    border-radius: 10px; 
}
td, th {
    border: 1px solid black; /* Параметры рамки */
}
.table-top-row {
    height: 10px; 
}
.table-bottom-row {
    height: 10px;   
}
<table align="center">
    <tr class="table-top-row">
        <td colspan="5"></td>
    </tr>
    <tr>
        <td rowspan="2">Услуги</td>
        <td colspan="3">Стоимость<br> по категориям сложности</td>
        <td rowspan="2">Cроки изготовления<br> рабочих дней</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Диспенсер </td>
        <td>1500</td>
        <td>3000</td>
        <td>5500</td>
        <td>7 - 14</td>
    </tr>
    <tr>
        <td>Воблер</td>
        <td>1500</td>
        <td>3000</td>
        <td>5500</td>
        <td>7 - 14</td>
    </tr>
    <tr class="table-bottom-row">
        <td  colspan="5"></td>
    </tr>       
</table>
введите сюда описание изображения

1 ответ 1

3

Можно сделать с помощью псевдоелементов.

table {
  text-align: center;
}

td,
th {
  border: 1px solid black;
  /* Параметры рамки */
}

.table-wrap {
  display: inline-block;
  padding: 10px 0;
  border: 1px solid grey;
  border-radius: 10px;
}

table {
  margin: 10px 0;
  position: relative;
  border-collapse: collapse;
}

table::before {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  border-radius: 10px 10px 0 0;
  background-color: lightcoral;
  content: '';
}

table::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  border-radius: 0 0 10px 10px;
  background-color: lightgreen;
  content: '';
}
<table align="center">
  <tr>
    <td rowspan="2">Услуги</td>
    <td colspan="3">Стоимость<br> по категориям сложности</td>
    <td rowspan="2">Cроки изготовления<br> рабочих дней</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Диспенсер </td>
    <td>1500</td>
    <td>3000</td>
    <td>5500</td>
    <td>7 - 14</td>
  </tr>
  <tr>
    <td>Воблер</td>
    <td>1500</td>
    <td>3000</td>
    <td>5500</td>
    <td>7 - 14</td>
  </tr>
</table>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.