10
    <table class="table_block">
        <thead>
            <tr>
                <td>ID</td>
                <td>Название</td>
                <td>Цена</td>
                <td>Цвета</td>
                <td>Продажи</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Name</td>
                <td>50$</td>
                <td>Black, White</td>
                <td>104</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Name</td>
                <td>70$</td>
                <td>Red, Blue, Grey</td>
                <td>255</td>
            </tr>
        </tbody>
    </table>

Нужно скруглить края у всей таблицы. Я уже как не пытался, к чему не применял... Я у первого td скгруглить пытался, у tr пытался. У всей таблице, понятно, не применяется. В общем все никак. Помогите, пожалуйста

1
  • 3
    Засунуть в div, и его скруглить.
    – exebook
    10 апр 2017 в 10:59

10 ответов 10

15

А на самом деле для кросс-браузерности вот так:):

.table_block {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  border: 1px solid #000;
  display: block;
}​

Хотя наверно мой ответ уже неактуален.

2
  • 1
    почему же, он более полный и не менее правильный) я бы ТС порекомендовал бы именно его)
    – thunder
    5 окт 2012 в 13:29
  • 3
    @hdimon, это уже будет не таблица. 13 ноя 2013 в 3:26
10

Насколько я помню, проблема глубже чем расстановка вендерных префиксов. border-radius конфликтует с border-collapse: collapse, которое, скорее всего используется. Я решал это двумя способами:

  1. отказаться от border-collapse: collapse, а бордюры внутри таблицы рисовать ячейкам. Скажежм правый и нижний, а добивать first-child`ами.

  2. не отказываться от border-collapse: collapse, но отказываться от вненего бордюра таблицы. Таблицу помещать в div. div`у рисовать бордюр и скруглять его.

P.S. Правда сейчас повторить не удается проблему :)

6

Попробуйте так:

.table_block {
  border-radius: 10px;
  border: 1px solid #000;
  display: block;
}​

Демо

3

Если ты пробуешь сделать в Internet Explorer у тебя ничего не выйдет. В нем нужно использовать картинки - а в других браузерах должно работать как написано ниже. Прямо в теге прописан стиль:

  <table style=' border-radius: 15px; border-style: solid;'>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Название</td>
                    <td>Цена</td>
                    <td>Цвета</td>
                    <td>Продажи</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Name</td>
                    <td>50$</td>
                    <td>Black, White</td>
                    <td>104</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Name</td>
                    <td>70$</td>
                    <td>Red, Blue, Grey</td>
                    <td>255</td>
                </tr>
            </tbody>
        </table>

И стиль прописан в классе:

<style type="text/css">
          .table_block{ border-radius: 15px; border-style: solid;}
</style>
  <table class ='table_block'>
        <thead>
            <tr>
                <td>ID</td>
                <td>Название</td>
                <td>Цена</td>
                <td>Цвета</td>
                <td>Продажи</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Name</td>
                <td>50$</td>
                <td>Black, White</td>
                <td>104</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Name</td>
                <td>70$</td>
                <td>Red, Blue, Grey</td>
                <td>255</td>
            </tr>
        </tbody>
    </table>
3

Можно ещё проще:

table{ overflow: hidden; border-radius: 6px;}
2

.table_block { border-radius: 10px; border: 1px solid #000; }​

2

Тоже столкнулся с проблемой, у меня получилось следующим образом!...
Я сделал обертку div обертку вокруг table

div {
  border: 1px solid red;
  border-radius: 5px;
}

table {
  overflow: hidden;
  border-radius: 5px;
}
1

border-radius: 20px; overflow: hidden;

1

Изменять свойство display не стоит. Зачем тогда использовать таблицу? Моё решение такое:

tbody {
    border-radius: 4px;
    box-shadow: 0 0 1px #000;
}

Пример: https://codepen.io/madebydima/pen/KKNmBxR

.table_block td {
  padding: 10px;
}

.table_block tbody {
  border-radius: 10px;
  box-shadow: 0 0 1px #000;
}
<table class="table_block">
  <thead>
    <tr>
      <td>ID</td>
      <td>Название</td>
      <td>Цена</td>
      <td>Цвета</td>
      <td>Продажи</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Name</td>
      <td>50$</td>
      <td>Black, White</td>
      <td>104</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Name</td>
      <td>70$</td>
      <td>Red, Blue, Grey</td>
      <td>255</td>
    </tr>
  </tbody>
</table>

4
  • Разве оно работает?
    – Qwertiy
    16 фев 2021 в 18:40
  • Для меня отлично сработало. Безусловно, это костыль. Но явно лучше, чем переопределять элементы таблицы в display: block (в чём смысл использования таблицы?). Вот пример (добавил в свой ответ): codepen.io/madebydima/pen/KKNmBxR
    – user430179
    17 фев 2021 в 14:55
  • Углы какие-то покусанные, но вообще да, внезапно. А display много зачем переопределять можно, правда, не везде работает.
    – Qwertiy
    17 фев 2021 в 15:39
  • Покусанные углы - классика border-radius :) Тут уже как браузер отрендерит
    – user430179
    17 фев 2021 в 17:47
0

 .wp-block-lazyblock-tablica .bem-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 0.5px solid var(--black, #1d1c23);
  border-radius: 15px;
}
 .wp-block-lazyblock-tablica .bem-table__row:first-child .bem-table__cell:first-child {
  border-top-left-radius: 13px;
}
 .wp-block-lazyblock-tablica .bem-table__row:first-child .bem-table__cell:last-child {
  border-top-right-radius: 13px;
}
 .wp-block-lazyblock-tablica .bem-table__row:last-child .bem-table__cell:first-child {
  border-bottom-left-radius: 13px;
}
 .wp-block-lazyblock-tablica .bem-table__row:last-child .bem-table__cell:last-child {
  border-bottom-right-radius: 13px;
}
 .wp-block-lazyblock-tablica .bem-table__row__cell {
  border-bottom: 0.5px solid var(--black, #1d1c23);
}
 .wp-block-lazyblock-tablica .bem-table__row:not(:last-child) .blog .wp-block-lazyblock-tablica .bem-table__row__cell:last-child {
  border-right: 0.5px solid var(--black, #1d1c23);
}
 .wp-block-lazyblock-tablica .bem-table__cell {
  text-align: left;
  padding: 24px;
  color: var(--black, #1d1c23);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 33px */
  border: 0.5px solid var(--black, #1d1c23);
}
<div class="lazyblock wp-block-lazyblock-tablica">
                    <h2 class="single__title">Таблица</h2>
                    <table class="bem-table">
                      <tbody class="bem-table__body">
                        <tr class="bem-table__row">
                          <td class="bem-table__cell">Текст левой колонки текст левой колонки</td>
                          <td class="bem-table__cell">Текст правой колонки текст правой колонки</td>
                        </tr>
                        <tr class="bem-table__row">
                          <td class="bem-table__cell">Текст левой колонки текст левой колонки</td>
                          <td class="bem-table__cell">Текст правой колонки текст правой колонки</td>
                        </tr>
                        <tr class="bem-table__row">
                          <td class="bem-table__cell">Текст левой колонки текст левой колонки</td>
                          <td class="bem-table__cell">Текст правой колонки текст правой колонки</td>
                        </tr>
                        <!-- Repeat the row as needed for your content -->
                      </tbody>
                    </table>
                </div>

Не знаю почему, браузеры неправильно воспринимают в такой ситуации border-radius, но должен быть в ячейках чуть меньше. Подбирите сами, он точно везде будет одинаковый.

Ваш ответ

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

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