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

Question

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

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

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

Я пытаюсь сделать стол с закругленными углами С помощью CSS3border-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 и последовательно квадратный сайт в других (я смотрю на вас, IE).

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

664 21

html css css3 html-table rounded-corners

21 ответов:

Comments

Ничего не найдено.

vamin · Accepted Answer · 2017-05-23 15: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 15: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 14: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 07:16:58

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

user59200 · Accepted Answer · 2016-02-10 19:37:58

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

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

Chris · Accepted Answer · 2016-02-10 19:01:36

Как сказал Ян, решение состоит в том, чтобы вложить таблицу в div и установить ее так:
.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}
С overflow:hidden, квадратные углы не будут кровоточить через div.

Joel · Accepted Answer · 2016-02-10 19: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:

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

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

EDIT 2:

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

adardesign · Accepted Answer · 2011-08-25 23: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 18: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 15:10:53

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

у меня есть макрос в SASS для этого, который полностью поддерживает external и внутренние границы, достигая того же стиля, что и border-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 18: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 19: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 14: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 20:32:53

решение с крахом границы: отдельно для таблицы и отображения:встроенная таблица для 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 23: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 20:23:10

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

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

Astro · Accepted Answer · 2012-10-20 01: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;
}
но нам нужно установить a width каждой колонки
tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

Mac Cowell · Accepted Answer · 2016-02-10 19: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 20: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 02:38:21

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

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

Diego Mello · Accepted Answer · 2018-05-11 19: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;
    }
  }
}