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

Изменить - Исходное название: Есть ли альтернативный способ достижения border-collapse:collapse в CSS (для того, чтобы иметь свернутую округленную таблицу углов)?

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

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

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

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

редактирует:

Я сделал простую страницу, чтобы продемонстрировать проблему здесь (только Firefox/Safari).

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

Резюме предлагаемых решений:

Окружение стола другим элементом с круглыми углами не работает, потому что квадратные углы стола "истекают".

Задание ширины рамки до 0 не сворачивает таблицу.

Внизу td углы по-прежнему квадрат после установки ячейки в ноль.

Использование JavaScript вместо этого позволяет избежать проблемы.

Возможные решения:

Таблицы генерируются в PHP, поэтому я могу просто применить другой класс к каждому из внешних th/tds и пометить каждый угол отдельно. Я бы предпочел не делать этого, поскольку он не очень изящный и немного боль для применения к нескольким таблицам, поэтому, пожалуйста, продолжайте предлагать предложения.

Возможное решение 2 - использовать JavaScript (jQuery, в частности) для создания углов. Это решение также работает, но все же не совсем то, что я ищу (я знаю, что я придирчив). У меня есть две оговорки:

  • Это очень легкий сайт, и я бы хотел, чтобы JavaScript был максимально минимальным
  • часть обращения, использующего радиус границы, для меня - грациозная деградация и прогрессивное совершенствование. Используя граничный радиус для всех закругленных углов, я надеюсь иметь последовательно округленный сайт в браузерах с поддержкой CSS3 и последовательно квадратный сайт в других (я смотрю на вас, IE).

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

ОТВЕТЫ

Ответ 1

Я понял. Вам просто нужно использовать некоторые специальные селекторы.

Проблема с закруглением углов таблицы заключалась в том, что элементы td также не округлялись. Вы можете решить это, сделав что-то вроде этого:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

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

Обходной путь должен поместить border-spacing: 0 и оставить значение по умолчанию border-collapse: separate на столе.

Ответ 2

Следующий метод работает (протестирован в 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;
}

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

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:

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

Ответ 8

Я пробовал обходной путь с использованием псевдоэлементов :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). Сообщите мне, если это работает для вас в других браузерах.

Ответ 9

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

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

Ответ 10

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

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

table {
  border-collapse: collapse;
}

Ответ 11

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

У меня есть макрос в 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.

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

Ответ 12

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

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

Ответ 13

Я просто написал сумасшедший набор 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 !*/

Ответ 14

Решение с пограничным обвалом: отдельный для таблицы и отображения: встроенная таблица для 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;        
}

Ответ 15

Я новичок в 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
}

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

Ответ 16

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

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

Ответ 17

Стол с закругленными углами и с граничными ячейками. Использование решения @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;
  }
}

Ответ 18

Вот недавний пример того, как реализовать таблицу с закругленными углами из 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;
}

Ответ 19

Я начал эксперимент с "дисплеем", и я обнаружил, что: 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;
}

Ответ 20

Я всегда так делаю, используя 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;
    }
  }
}

Ответ 21

Лучшее решение на данный момент исходит от вашего собственного решения и выглядит так:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

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

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}
<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Ответ 22

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

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