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

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

288 голосов
/ 10 марта 2009

Редактировать - Оригинальное название: Есть ли альтернативный способ достижения 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) для стилизации углов. Это решение также работает, но все еще не совсем то, что я ищу (я знаю, что я привередлива). У меня есть две оговорки:

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

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

Ответы [ 21 ]

213 голосов
/ 11 марта 2009

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

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

74 голосов
/ 06 апреля 2010

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

Если вы хотите использовать решение только для CSS (не нужно устанавливать cellspacing=0 в HTML), которое допускает границы в 1 пиксель (чего нельзя сделать с помощью решения 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>
27 голосов
/ 18 октября 2010

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

23 голосов
/ 10 марта 2009

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

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

14 голосов
/ 07 января 2013

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

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

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

7 голосов
/ 10 марта 2009

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

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:

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

6 голосов
/ 25 августа 2011

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

5 голосов
/ 24 октября 2017

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

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

table {
  border-collapse: collapse;
}
5 голосов
/ 27 ноября 2010

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

<table class="top_container" align="center" cellspacing="0" cellpadding="0">
Страница:
...