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


318

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углы остаются квадратными после установки нуля в пространстве ячеек.

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

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

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

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

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

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


2
Не могли бы вы обернуть таблицу в div, установить border-radius и «overflow: hidden» в div? Я только что проверил, и это работает нормально, если вам не нужно прокручивать / расширять в div, который имеет фиксированную ширину / высоту или его родителей, которые делают.
Ян

Я думаю, что в последнем утверждении CSS отсутствует точка с запятой.
JensG

3
Этот вопрос был задан в 2009 году. Я немного удивлен, что в 2015 году нет лучших решений, чем перечисленные ниже. W3C должен был это исправить несколько лет назад.
Джонатан М

Ответы:


242

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

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


75
Вместо того, чтобы возиться с HTML, почему бы не добавить border-spacing: 0;стиль границы?
Рамон Тайаг

3
У меня возникла проблема с установкой цвета фона тега TR вместо тега TD. Если вы раздеваете свой стол, убедитесь, что вы устанавливаете цвет фона TD, а не TR.
Будет ли бритва

Ну , что происходит , если вы должны использовать цвет фона на TR? Это вообще возможно?
Мохоч

1
Просто добавив, border-spacing: 0;как Рамон рекомендую исправить это для меня. Убедитесь , что вы добавляете border-radiusи border-spacingстили к <th>или <td>элементам, а не <thead>или <tbody>.
Гэвин

1
Я использую начальную загрузку, и я нашел решение, используя советы Рамона, например:border-spacing: 0; border-collapse: separate;
Caner SAYGIN

84

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

5
Это единственное, что сработало для меня. Трудно получить правильный цвет на границе стола.
Томас Але

Он не может использоваться, если ваш стол имеет другой цвет фона, чем окружающая область.
g.pickardou

1
Спасибо за ваш код, он также работает с Firefox 26.0
maxivis

1
@ g.pickardou, эту проблему можно решить, добавив «overflow: hidden» в элемент таблицы.
Вэл

box-shadow делает стол больше и теперь его края обрезаются.
Рэй

63

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


1
Пожалуйста, напишите ответы, которые включают (постоянный) код. Если в ответе много кода, просто опубликуйте соответствующие биты и объясните, почему они актуальны.
Самуэль Хармер

3
Это отличное решение, но его было немного сложно прочитать. Я переписал некоторые правила стиля и добавил объяснение кода, так что, надеюсь, это поможет.
Майкл Мартин-Смукер

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

Какое отношение table.Infoкласс имеет к чему-либо?
Pylinux

28

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


Спасибо, это позволило мне сделать то, что мне нужно было сделать (что включало ряд элементов TH в верхней части окна «закругленный угол», содержащего все TD ниже)
RonLugge

12
Проблема в border-spacing: 0том, что у вас не может быть границы в 1 пиксель, верно? Потому что границы складываются, а не разрушаются.
Майкл Мартин-Смукер

1
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;дал именно то, что мне было нужно.
Милад.Нозари

23

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

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


Я тоже подумал об этом, но если я создам div, чтобы окружить стол и установил его закругленными углами, квадратные углы стола все равно будут просвечивать. Смотрите недавно опубликованный пример.
Вамин

Лучший компромисс, который я смог найти, - это добавить в таблицу блок THEAD и применить к нему серый фон (с #eee на самой таблице). Ячейки заголовка переполнились за границей ТАБЛИЦЫ, а не перед ней. Затем я увеличил границу таблицы до 3px, чтобы скрыть переполнение.
user59200

3
@vamin "истекает кровью" - нет, если вы используетеoverflow:hidden;
Брайан Маккатон

Таким образом, в этой ситуации каждый может использовать мое решение из нижней части этой страницы. B2n.ir/table-radius
AmerllicA

15

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

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

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


Имейте в виду, кто бы ни хотел использовать это, что с overflow: hiddenлюбым всплывающим окном / всплывающей подсказкой будет ограничено размерами оболочки.
user776686

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я предполагаю, что вам все равно.

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

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

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

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

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


Я добавил пример с cellspacing = 0, и он намного ближе. Нежелательные границы исчезают, но нижние углы все еще кровоточат.
Вамин

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

6

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

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

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

table {
  border-collapse: collapse;
}

4

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

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

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

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


Вам больше не нужны префиксы для border-radius, ожидайте FF 3.6 (-moz). Кроме того, -khtml больше не нужен.
Джонатан Литтке

@JonatanLittke, вы всегда можете отредактировать ответ, если считаете, что его можно улучшить. Я удалил все префиксы и добавил ссылку на caniuse.com, чтобы люди могли сами принимать решения о префиксах border-radius.
Майкл Мартин-Смукер

4

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

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

4

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

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

Это работает, но требует, чтобы вы впоследствии использовали трюки firstchild / lastchild, чтобы получить эффект.
Томас Але

4

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

3

Решение с 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;        
}

нет причин делать такой ответ сообществу вики. Это позволит вам не получить репутацию от вашего ответа.
Tacaswell

3

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

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


3

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

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


Это умное решение, но оно также «удаляет» фактическую границу. В Chrome правая и нижняя границы таблицы исчезают, а все закругленные углы не имеют границ.
Алекс Йоргенсон

3

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

2

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

2

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

2

Вот способ:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}
<div>
  <table></table>
</div>

Или

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }


0

Я всегда так делаю, используя 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-collapse: collapseвключенным.
giovannipds

@giovannipds Взгляните на его собственный ответ (принятый ответ). Мой путь - это просто другой путь. Теперь удалите «-1».
Диего Мелло

О, извини, ты определенно прав, моя ошибка, его принятый ответ, кажется, говорит о том же. Я должен был придерживаться того, что было написано в заголовке вопроса, он подчеркнул, что хочет обрушения границы, поэтому я пошел прямо к нему. Я бы удалил -1, если бы мог, но я не могу, вам нужно отредактировать что-то в ответе, чтобы мне это удалось. Попробуйте упомянуть кое-что о том, что это невозможно border-collapse: collapse. Прости еще раз, я подожду твоего обновления.
giovannipds

0

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

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>


-1

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.