0

Подскажите пожалуйста, как элементу tr дать margin-bottom и border-radius? Вот что у меня, не получается закруглить. введите сюда описание изображения

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

tr {
  background-color: var(--color-blue);
  border-radius: 10px;
  margin-bottom: 8px;
}

td {
  font-size: 20px;
  font-weight: 500;
  padding: 10px 24px;
}
<table cellspacing="0">
  <tr>
    <td>Уборка санузлов</td>
    <td>800 ₽ шт.</td>
    <td>Добавить</td>
  </tr>
  <tr>
    <td>Уборка балкона с мытьем окон</td>
    <td>+ 2000 ₽</td>
    <td>Добавить</td>
  </tr>
</table>

1 ответ 1

3

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;   
}

tr {
    background-color: var(--color-blue);
    margin-bottom: 8px;    
}

td {
    font-size: 20px;
    font-weight: 500;
    padding: 10px 24px;
    border: 1px solid #c0c0c0;
}

td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
<table cellspacing="0">
    <tr>
        <td>Уборка санузлов</td>
        <td>800 ₽ шт.</td>
        <td>Добавить</td>
    </tr>
    <tr>
        <td>Уборка балкона с мытьем окон</td>
        <td>+ 2000 ₽</td>
        <td>Добавить</td>
    </tr>
</table>

Еще можно это сделать, создав класс, т.к. изначально TR не поддерживает border

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

tr {
    background-color: var(--color-blue);
    margin-bottom: 8px;
    display: block;
}

td {
    font-size: 20px;
    font-weight: 500;
    padding: 10px 24px;
}

.bordrad {
  border: 1px solid #C0C0C0;
  border-radius: 10px;
}
<table cellspacing="0">
    <tr class='bordrad'>
        <td>Уборка санузлов</td>
        <td>800 ₽ шт.</td>
        <td>Добавить</td>
    </tr>
    <tr class='bordrad'>
        <td>Уборка балкона с мытьем окон</td>
        <td>+ 2000 ₽</td>
        <td>Добавить</td>
    </tr>
</table>

UPD:

table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0px 8px;
    }

    tr {
        background-color: #0dcaf0;
    }

    td {
        font-size: 20px;
        font-weight: 500;
        padding: 10px 24px;
    }

    td:first-child {
        font-size: 20px;
        font-weight: 500;
        padding: 10px 24px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;

    }
    td:last-child {
        font-size: 20px;
        font-weight: 500;
        padding: 10px 24px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
<table>
    <tr>
        <td>Уборка санузлов</td>
        <td>800 ₽ шт.</td>
        <td>Добавить</td>
    </tr>
    <tr>
        <td>Уборка балкона с мытьем окон</td>
        <td>+ 2000 ₽</td>
        <td>Добавить</td>
    </tr>
</table>

2
  • Так класс тогда не нужно указывать, т.к вы сделали tr блочным + у вас текст сьехал, он не равноверно стоит :)
    – KILLER
    7 фев в 18:03
  • @KILLER Добавил третий вариант )
    – SwaD
    7 фев в 18:46

Ваш ответ

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

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