Свойство CSS3 border-radius и border-collapse: collapse не смешиваются. Как я могу использовать border-radius для создания свернутой таблицы с закругленными углами?

Следующий метод работает (протестирован в Chrome) с помощью box-shadow с расширением 1px вместо "реальной" границы.

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

Если вы хотите использовать только CSS-решение (нет необходимости устанавливать cellspacing=0 в HTML), что позволяет использовать границы 1px (что вы не можете сделать с решением border-spacing: 0), я предпочитаю делать следующее:

• Установите border-right и border-bottom для ваших ячеек таблицы (td и th)
• Дайте ячейкам в первой строке border-top
• Дайте ячейкам в первом столбце border-left
• Используя селектора first-child и last-child, обогните соответствующие углы для ячеек таблицы в четырех углах.

См. Демонстрацию здесь.

Учитывая следующий HTML:

Пример SEE ниже:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         

<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

Пробовали ли вы использовать table{border-spacing: 0} вместо table{border-collapse: collapse}???

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

рабочий проект указывает, что border-radius не применяется к элементам таблицы, когда значение border-collapse равно collapse.

Как сказал Ян, решение состоит в том, чтобы вложить таблицу в div и установить ее так:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

С overflow:hidden квадратные углы не будут проходить через div.

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

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

И затем, чтобы получить границу внизу и справа назад

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-child недействителен в ie6, но если вы используете border-radius, я предполагаю, что вам все равно.

EDIT:

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

Толстые серые границы, которые вы видите, на самом деле являются фоном таблицы (это можно увидеть, если вы измените цвет рамки на красный). Если вы установите для ячейки значение нуля (или эквивалентно: td, th { margin:0; }), серые "границы" исчезнут.

ИЗМЕНИТЬ 2:

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

Я пробовал обходной путь с использованием псевдоэлементов :before и :after на thead th:first-child и thead th:last-child

В сочетании с упаковкой таблицы с <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

см. jsFiddle

Работает для меня в chrome (13.0.782.215). Сообщите мне, если это работает для вас в других браузерах.

На самом деле вы можете добавить table внутри div в качестве своей оболочки. и затем назначьте эти коды CSS оболочке:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

У меня была та же проблема. полностью удалите border-collapse и используйте: cellspacing="0" cellpadding="0" в html-документе. Пример:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Я просто написал сумасшедший набор CSS для этого, который, кажется, отлично работает:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

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

Если вы используете 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>

Данные ответы работают только тогда, когда нет границ вокруг таблицы, что очень важно!

У меня есть макрос в SASS для этого, который полностью поддерживает внешние и внутренние границы, достигая того же стиля, что и пограничный коллапс: свернуть, фактически не указывая его.

Протестировано в FF/IE8/Safari/Chrome.

Дает хорошие округленные границы в чистом CSS во всех браузерах, но IE8 (изящно изнашивается), поскольку IE8 не поддерживает пограничный радиус: (

Некоторым старым браузерам могут потребоваться префиксы поставщиков для работы с border-radius, поэтому не стесняйтесь добавлять эти префиксы к вашему коду при необходимости.

Этот ответ не самый короткий - но он работает.

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

Чтобы применить этот стиль, просто измените

<table>

:

<table class="roundedTable">

и обязательно включите вышеприведенные стили CSS в свой HTML.

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

Нашел этот ответ, столкнувшись с той же проблемой, но нашел его довольно простым: просто дайте переполнение таблицы: hidden

Нет необходимости в элементе обертывания. Конечно, я не знаю, работало бы это 7 лет назад, когда вопрос был первоначально задан, но он работает сейчас.

Я новичок в HTML и CSS, и я также искал решение для этого, вот что я нахожу.

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

Я пытаюсь, думаю, что это работает:)

Решение с пограничным обвалом: отдельный для таблицы и отображения: встроенная таблица для tbody и thead.

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

Я начал эксперимент с "дисплеем", и я обнаружил, что: border-radius, border, margin, padding, в table отображаются с:

display: inline-table;

Например

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Но нам нужно установить a width каждого столбца

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

Вот недавний пример того, как реализовать таблицу с закругленными углами из http://medialoot.com/preview/css-ui-kit/demo.html. Это основано на специальных селекторах, предложенных Джоэлом Поттером выше. Как вы можете видеть, это также включает в себя некоторую магию, чтобы сделать IE немного счастливым. Он включает некоторые дополнительные стили для чередования цвета строк:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

Стол с закругленными углами и с граничными ячейками. Использование решения @Ramon Tayag.

Ключ заключается в использовании border-spacing: 0 как он указывает.

Решение с использованием SCSS.

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

Я всегда так делаю, используя Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

Радиус границы теперь официально поддерживается. Таким образом, во всех приведенных выше примерах вы можете удалить префикс "-moz-".

Другой трюк заключается в том, чтобы использовать тот же цвет для верхней и нижней строк, что и ваша граница. Со всеми тремя цветами то же самое, он вписывается и выглядит как идеально округленный стол, хотя это физически не так.