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

Question

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

Edit-Оригинальное Название: есть ли альтернативный способ достижения 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 углы по-прежнему квадратные после установки cellspacing на ноль.

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

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

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

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

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

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

269

css css3 html html-table rounded-corners

автор: vamin

21 ответов

автор: vamin · Accepted Answer · 2017-05-23 12:10:36

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

проблема с округлением углов таблицы заключалась в том, что элементы 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 ломая все. Только установил cellspacing="0" в html вместо этого (спасибо,Джоул).

автор: cmrd.Kaash · Accepted Answer · 2013-04-18 12:05:25

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

автор: NullUserException · Accepted Answer · 2017-08-27 11:49:48

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

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

смотрите демо здесь.

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

см. пример ниже:

   

 .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>

автор: Cesar · Accepted Answer · 2010-10-18 04:16:58

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

автор: user59200 · Accepted Answer · 2016-02-10 17:37:58

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

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

автор: Chris · Accepted Answer · 2016-02-10 17:01:36

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

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

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

автор: Joel · Accepted Answer · 2016-02-10 17:16:33

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

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:

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

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

EDIT 2:

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

автор: adardesign · Accepted Answer · 2011-08-25 20:43:40

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

автор: lars · Accepted Answer · 2016-02-10 16:57:54

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

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

автор: robbie613 · Accepted Answer · 2013-04-18 12:10:53

ответы только тогда, когда нет границ вокруг стола, что очень ограничивает!

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

протестировано в 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.

надеюсь, что это помогает.

автор: brauliobo · Accepted Answer · 2013-06-08 15:26:01

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

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

автор: Rev · Accepted Answer · 2016-02-10 17:03:23

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

автор: AngelHotxxx · Accepted Answer · 2017-10-24 11:45:08

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

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

table {
  border-collapse: collapse;
}

автор: Tommer · Accepted Answer · 2012-11-28 18:32:53

решение с border-collapse: отдельно для таблицы и отображения: inline-table для 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;        
}

автор: ahmed ghanayem · Accepted Answer · 2015-02-08 21:59:09

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

Я пробую, угадайте, что он работает:)

автор: Akexis · Accepted Answer · 2016-09-27 17:23:10

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

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

автор: Astro · Accepted Answer · 2012-10-19 22:01:28

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

но нам нужно установить width каждой колонки

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

автор: Mac Cowell · Accepted Answer · 2016-02-10 17:00:28

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

автор: Pere Pages · Accepted Answer · 2018-08-25 17:17:06

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

автор: Hawk · Accepted Answer · 2011-11-17 00:38:21

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

еще один трюк-использовать тот же цвет для верхних и нижних строк, что и ваша граница. Все 3 цвета, он сливается и выглядит как идеально круглый стол, Даже если не физически.

автор: Diego Mello · Accepted Answer · 2018-05-11 16:54:45

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