Закругленные углы таблицы Только CSS

86

Я искал и искал, но не смог найти решения для моих требований.

У меня есть простая таблица HTML. Мне нужны закругленные углы, без использования изображений или JS, то есть только чистый CSS . Как это:

Эскиз макета стола

Закругленные углы для угловых ячеек и 1pxтолстая рамка для ячеек.

Пока у меня есть это:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Но это оставляет меня без границ для ячеек. Если я добавлю границы, они не закругляются!

Какие-нибудь решения?

html css html-table rounded-corners Вишал Шах
источник
1
Вы пробовали добавить границу к элементам TD с помощью moz-border-radius? Также имейте в виду, что это не будет работать в IE, IE по-прежнему будет показывать прямые края.
Фермин,
Глядя на ответы и ваши комментарии, непонятно, чего вы хотите: где вы хотите закругленные углы? таблица, ячейки таблицы, только ячейки по углам вашего стола?
BiAiB
3
Думаю, это совершенно очевидно из названия вопроса, углов стола
Вишал Шах
@VishalShah +1 за действительно полезный вопрос. Я вслепую использовал класс jQuery UI с закругленными углами, разработанный для виджетов пользовательского интерфейса, но применил его к элементам таблицы, и все получилось квадратным. Так что теперь я все еще могу использовать свою тему пользовательского интерфейса jQuery с виджетом на основе таблицы.
DavidHyogo

Ответы:

90

Кажется, отлично работает в FF и Chrome (не тестировал другие) с отдельными границами: http://jsfiddle.net/7veZQ/3/

Изменить: вот относительно чистая реализация вашего эскиза: 

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}
<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>
Развернуть фрагмент

http://jsfiddle.net/MuZzz/3577/

RoToRa
источник
Не совсем то, что я ищу. Если вы удалите отступ таблицы и примените радиус границы только к угловым ячейкам, вы получите границы толщиной 2 пикселя, что некрасиво. Скорее вообще без границ.
Vishal Shah
3
Близко. Угловым ячейкам тоже нужен радиус границы. jsfiddle.net/JWb4T/1 Хотя теперь вы видите небольшой промежуток между краем угловых ячеек и краем таблицы. Можно исправить, уменьшив радиус границы угловых ячеек. Спасибо: D
Vishal Shah
Рад, что ты разобрался. Обратите внимание, что first-childи last-childне работает в IE6 / 7/8, но это не проблема для вас, поскольку ни то, ни другое не работает border-radius. Это означает, что вы не сможете использовать CSS3Pie, чтобы исправить это в IE - он исправит радиус границы, но не первый / последний дочерний элемент.
Spudley
Добавление border-collapse: separate;в шаблон Zurb Ink решило эту проблему для меня.
Йохан Деттмар
1
возможно, 7 лет назад это выглядело хорошо, но сегодня границы ячеек не соединяются с помощью этого решения, поэтому это выглядит ужасно.
rtaft
23

На мой взгляд, решение Twitter Bootstrap выглядит хорошо. Он исключает IE <9 (без закруглений в IE 8 и ниже), но я думаю, что это нормально, если вы разрабатываете перспективные веб-приложения.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}
<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>
Развернуть фрагмент

Вы можете поиграть с этим здесь (на jsFiddle)

Ларс Шинкель
источник
17

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

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

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

Чтобы включить на границе, и , таким образом , получить ваши закругленные углы, вам также нужен borderатрибут ваших tdи thэлементов.

td, th {
   border:solid black 1px;
}

Вы также увидите закругленные углы, если у вас есть цвет фона (или графика), хотя, конечно, это должен быть цвет фона, отличный от окружающего элемента, чтобы закругленные углы были видны без рамки.

Стоит отметить, что некоторые старые браузеры не любят помещать border-radiusтаблицы / ячейки таблиц. Возможно, стоит поместить <div>внутрь каждой ячейки и стилизовать ее. Однако это не должно влиять на текущие версии любых браузеров (кроме IE, который вообще не поддерживает закругленные углы - см. Ниже).

Наконец, не то чтобы IE вообще не поддерживает border-radius(бета-версия IE9 поддерживает, но большинство пользователей IE будут использовать IE8 или меньше). Если вы хотите взломать IE для поддержки border-radius, посмотрите http://css3pie.com/

[РЕДАКТИРОВАТЬ]

Хорошо, это меня беспокоило, поэтому я провел небольшое тестирование.

Вот пример JSFiddle, с которым я играл

Похоже, что самое важное, чего вам не хватало, было border-collapse:separate;в элементе таблицы. Это мешает ячейкам связывать свои границы вместе, что позволяет им подбирать радиус границы.

Надеюсь, это поможет.

Spudley
источник
Чтобы свести код к минимуму, я не учел кроссбраузерность. Если я даю границу td и th, они не округляются. Я получаю ровные края. Могу дать образец кода CSS для таблицы без применения к нему CSS, который продемонстрирует, что вы говорите.
Vishal Shah
@Vishal Shah - Я обновил свой ответ после нескольких тестов. Надеюсь, это поможет.
Spudley
В вашем примере отображается радиус границы для ВСЕХ ячеек, где, как я хочу, только для угловых ячеек. Это то, что я искал: jsfiddle.net/JWb4T/1
Вишал Шах,
@Vishal Shah - Я понял, что проблема заключается в отсутствии округления в любом месте таблицы, а не в том, какие именно биты таблицы следует округлять. Рад, что вы все разобрали в конце (похоже, border-collapse:separate;совет был полезен в конце)
Spudley
+1 за крах-коллапс: отдельный совет. Это мне действительно помогло.
DavidHyogo
12

Выбранный ответ ужасен. Я бы реализовал это, нацеливаясь на ячейки угловой таблицы и применяя соответствующий радиус границы.

Чтобы получить верхние углы, установите радиус границы для первого и последнего элементов типа th , затем завершите настройкой радиуса границы для последнего и первого элемента типа td для последнего элемента типа tr, чтобы получить нижние углы.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
Люк Флорной
источник
Это намного лучше, чем все другие ответы ... Это удивительно просто и элегантно!
Eric Cote
Рад, что смог помочь!
Люк
Это действительно хорошо работает, но у меня есть еще одна таблица с thэлементами в верхней и левой части таблицы, и это не работает для этого. Как мне скруглить углы такого стола?
nenur
7

Лучшее решение, которое я нашел для закругленных углов и другого поведения CSS3 для IE <9, можно найти здесь: http://css3pie.com/

Загрузите плагин, скопируйте его в каталог в структуре вашего решения. Затем в вашей таблице стилей убедитесь, что у вас есть тег поведения, чтобы он втягивал плагин.

Простой пример из моего проекта, который дает мне закругленные углы, цветовой градиент и тень блока для моей таблицы:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Не беспокойтесь, если ваш Visual Studio CSS intellisense выдает зеленое подчеркивание неизвестных свойств, он все равно работает, когда вы его запускаете. Некоторые элементы не очень четко задокументированы, но примеры довольно хороши, особенно на первой странице.

Патрик Родригес
источник
6

Благодаря личному опыту я обнаружил, что невозможно скруглить углы ячейки таблицы HTML с помощью чистого CSS. Возможно закругление самой внешней границы стола.

Вам придется прибегать к использованию изображений, как описано в этом руководстве , или любых подобных :)

Кайл
источник
1
+1, и здесь же, недавно пытались этого добиться, но безуспешно. Пришлось поместить внутрь <div>. ^^,
tomsseisums
4

Это немного грубо, но я собрал кое-что, полностью состоящее из CSS и HTML.

  • Наружные углы закруглены
  • Строка заголовка
  • Несколько строк данных

В этом примере также используется :hoverпсевдокласс для каждой ячейки данных <td>. Элементы можно легко обновить в соответствии с вашими потребностями, а наведение можно быстро отключить.

(Тем не менее, у меня еще нет :hoverвозможности правильно работать с полными строками <tr>. Последняя зависшая строка не отображается с закругленными углами внизу. Я уверен, что есть что-то простое, что упускается из виду.)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}
<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>
Развернуть фрагмент

К. Паркер
источник
Это должен быть утвержденный ответ. Спасибо!
воплотился
1

Добавьте <div>обертку вокруг таблицы и примените следующий CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

в эту обертку.

Убби
источник
1

Чтобы адаптировать блестящий ответ @luke funoy - и если вы не используете thв своей таблице, вот весь CSS, который вам нужен для создания округленной таблицы:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
свободолюбивый
источник
0

Для таблицы с полями и с возможностью прокрутки используйте это (замените переменные, $начальные тексты)

Если вы используете thead, tfootили th, просто замените ими tr:first-childи tr-last-childи td.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>
Браулиобо
источник
0

Вы можете попробовать это, если хотите, чтобы углы с каждой стороны таблицы закруглялись, не касаясь ячеек: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>
Юнес Хэдри
источник
0

Образец HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, легко конвертируемый в CSS, используйте sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Леандро Барбоса
источник
0

Следующее - это то, что я использовал, что помогло мне в разных браузерах, поэтому я надеюсь, что это поможет кому-то в будущем:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Очевидно, что эта #contentblockчасть может быть заменена / отредактирована по мере необходимости, и вы можете найти border-radius.htcфайл, выполнив поиск в Google или в своем любимом веб-браузере.

Ансипантс
источник
0

Это css3будет поддерживать только недавний браузер, отличный от IE <9.

Посмотрите здесь , он выводит свойство round для всех доступных браузеров.

BiAiB
источник
4
css3please ничего не делает для border-radius в IE. Если вы хотите взломать IE для поддержки border-radius, посмотрите css3pie.com
Spudley
Я говорю о свойстве округления конкретно для таблицы, а не о каком-либо другом элементе.
Vishal Shah
0

Добавьте между <head>тегами:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

и в теле:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

Например, цвет, содержимое и форматирование ячеек;
речь идет о размещении цветных ячеек в div. При этом черные границы ячеек / границы таблицы фактически являются цветом фона div.
Обратите внимание, что вам нужно установить div-border-radius примерно на 2 значения больше, чем радиусы углов отдельных ячеек, чтобы получить эффект плавного закругленного угла.

Пол Шуддебёрс
источник
0

Урок в границах таблицы ...

ПРИМЕЧАНИЕ. Приведенный ниже код HTML / CSS следует просматривать только в IE. Код не будет правильно отображаться в Chrome!

Нам нужно помнить следующее:

  1. У таблицы есть граница: ее внешняя граница (которая также может иметь радиус границы).

  2. Сами ячейки ТАКЖЕ имеют границы (которые тоже могут иметь радиус границы).

  3. Границы таблицы и ячеек могут мешать друг другу:

    Граница ячейки может проходить через границу таблицы (например, границу таблицы).

    Чтобы увидеть этот эффект, измените правила стиля CSS в приведенном ниже коде следующим образом:
    i. таблица {border-collapse: отдельный;}
    ii. Удалите правила стиля, расположенные вокруг угловых ячеек таблицы.
    iii. Затем поиграйте с интервалом между границами, чтобы увидеть интерференцию.

  4. Однако граница таблицы и границы ячеек могут быть СОВЕРШЕННЫ (используя: border-collapse: collapse;).

  5. Когда они свернуты, границы ячейки и таблицы мешают по-другому:

    я. Если граница таблицы закруглена, но границы ячеек остаются квадратными, то форма ячейки имеет приоритет, и таблица теряет изогнутые углы.

    II. И наоборот, если угловые ячейки изогнуты, но граница таблицы квадратная, вы увидите уродливый квадратный угол, граничащий с кривизной угловых ячеек.

  6. Учитывая, что атрибут ячейки имеет приоритет, можно обойти четыре угла стола следующим образом:

    я. Сворачивание границ на столе (используя: border-collapse: collapse;).

    II. Задайте желаемую кривизну угловых ячеек таблицы.
    iii. Не имеет значения, скруглены ли углы стола (т.е. его border-radius может быть нулевым). 

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}
			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>
Развернуть фрагмент

Икбал Хамид
источник
-1

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}
Горан Васич
источник
Пожалуйста, подробно
расскажите
@SrivatsShankar Я написал это давно, поэтому, судя по этому -1, я полагаю, что это больше не работает. Я хотел добавить «border-radius» к <table>, а затем «overflow: hidden» скроет внешние границы <td>. Я предполагаю, что вы могли бы попытаться добавить «border-radius», «border» и «overflow: hidden» к <div>, который является оболочкой для <table>, а затем добавить границы внутри каждого <td> (I сделает первый и последний элемент каждой строки / столбца без внешней границы, потому что <div> будет иметь закругленную границу, как на картинке)
Горан Васич
справедливо. Это имеет смысл. Он не дает запрошенного точного результата, но я понимаю вашу точку зрения. Если бы вы могли отредактировать свой ответ, я могу изменить свой счет. :-)
Srivats Shankar