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

https://stackoverflow.com/questions/628301

06-07-2019
|

Вопрос

Редактировать - Оригинальное название: Есть ли альтернативный способ достижения 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/td и оформить каждый угол отдельно.Я бы предпочел не делать этого, поскольку это не очень элегантно и применять к нескольким таблицам немного затруднительно, поэтому, пожалуйста, продолжайте поступать предложениями.

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

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

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

Решение

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

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

Другие советы

Следующий метод работает (проверено в 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), что позволяет использовать границы в 1 пиксель (чего нельзя сделать с помощью border-spacing: 0 решение), я предпочитаю сделать следующее:

Установить border-right и border-bottom для ячеек вашей таблицы (td и th)
Дайте клетки в Первая строка а border-top
Дайте клетки в первый столбец а 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>

Вы пробовали использовать 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 Я предполагаю, что тебе все равно.

РЕДАКТИРОВАТЬ:

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

Толстые серые границы, которые вы видите, на самом деле являются фоном таблицы (вы можете это ясно увидеть, если измените цвет границы на красный).Если вы установите расстояние между ячейками равное нулю (или эквивалентно: 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). Дайте мне знать, работает ли это у вас в других браузерах.

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

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

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

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

table {
  border-collapse: collapse;
}

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

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

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

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

Некоторый старые браузеры могут требовать префиксы поставщиков работать с 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.

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

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

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

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

Решение с схлопыванием границ: отдельно для таблицы и отображением: встроенная таблица для тела и заголовка.

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;        
}

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

Попробую, угадайте, что получится :)

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

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

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

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

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

$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;
  }
}

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow