Властивість радіусу кордону CSS3 та границя краху: колапс не змішується. Як я можу використовувати радіус кордону, щоб створити згорнуту таблицю із закругленими кутами?


317

Редагувати - Оригінальна назва: Чи є альтернативний спосіб досягнення 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. Частина заклику, що використання радіуса кордону для мене є витонченою деградацією та прогресивним посиленням. Використовуючи радіус кордону для всіх закруглених кутів, я сподіваюся мати стабільно округлий сайт у браузерах, що підтримують CSS3, та стабільно квадратний сайт в інших (я дивлюся на вас, IE).

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


2
Не могли б ви загорнути таблицю в div, встановити радіус межі та "overflow: hidden" на div? Я щойно перевірив, і це працює чудово, якщо тільки вам не потрібно прокручувати / розгортати в діві, який має виправити ширину / висоту або його батьків.
Ян

Я думаю, що в останньому викладі CSS немає крапки з комою.
JensG

3
Це питання було задано у 2009 році. Я трохи здивований, що у 2015 році немає кращих рішень, ніж наведені нижче. W3C повинен був виправити це кілька років тому.
Джонатан М

Відповіді:


241

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

Проблема із закругленням кутів таблиці полягала в тому, що елементи 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 цю проблему можна вирішити, додавши на елемент таблиці "переповнення: приховано".
Вал

box-тінь робить стіл більшим, і тому сторони відсікаються зараз.
Рей

63

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

  • Встановіть а border-rightта border-bottomдля комірок таблиці ( tdі th)
  • Дайте клітинкам у перший рядок aborder-top
  • Дайте клітинкам у перший стовпець aborder-left
  • Використовуючи first-childі last-childселектори, округніть відповідні кути для комірок таблиці у чотирьох кутах.

Дивіться демонстрацію тут.

Враховуючи такий HTML:

Приклад SEE нижче:

   

 .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 у верхній частині поза полем «закруглений кут», що містить усі ТД внизу)
RonLugge

12
Проблема border-spacing: 0полягає в тому, що у вас не може бути межі 1px, правда? Тому що межі укладаються, а не руйнуються.
Майкл Мартін-Смукер

1
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;вийшло саме те, що мені було потрібно.
Мілад.Нозарі

23

Можливо, вам доведеться покласти ще один елемент навколо столу та стиль, який має закруглену облямівку.

У робочих проектів вказує , що border-radiusне відноситься до елементів таблиці , коли значення border-collapseє collapse.


Це теж я вважав, але якщо я створю діл, щоб оточити стіл і встановити його із закругленими кутами, кути квадратного столу все одно пропускають наскрізь. Дивіться недавно опублікований приклад.
vamin

Найкращим компромісом, який я міг знайти, було додавання блоку THEAD до таблиці та нанесення на нього сірого фону (з #eee на сам стіл). Заголовкові комірки переповнювались за межею ТАБЛИЦІ замість неї. Потім я збільшив межу таблиці до 3 пікселів, щоб приховати переповнення.
користувач59200

3
@vamin "кровоточить" - не, якщо ви використовуєтеoverflow:hidden;
Брайан МакКутчон

Тож у цій ситуації кожен може скористатися моїм рішенням із нижньої частини цієї сторінки b2n.ir/table-radius
AmerllicA

15

Як сказав Іан, рішення полягає в тому, щоб вкласти таблицю всередині div і встановити її так:

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

З overflow:hidden, квадратні кути не будуть протікати через дів.


Майте на увазі, хто хоче ним скористатися, що з overflow: hiddenбудь-яким переходом / підказкою буде вибрано розміри обгортки.
користувач776686

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; } сірі "межі" зникнуть.

EDIT 2:

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


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

Ще раз дякую за вашу допомогу. Таблиці генеруються в 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

Працює для мене в хромі (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 для цього, який повністю підтримує зовнішні та внутрішні кордони, досягаючи тієї ж стилістики, що і межі-колапс: колапс, фактично не вказуючи його.

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

Сподіваюсь, це допомагає.


Вам більше не потрібні префікси для радіуса кордону, очікуйте FF 3.6 (-moz). Крім того, -khtml вже точно не потрібен.
Jonatan Littke

@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">

Це спрацьовує, але для того, щоб отримати ефект, потрібно згодом використовувати хитрощі для первістка / останнього.
Томас Ейл

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

Рішення з обвалом кордону: окремо для таблиці та дисплея: вбудована таблиця для 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;
}

1

Ось спосіб:

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

Прикордонний радіус зараз офіційно підтримується. Отже, у всіх вищенаведених прикладах ви можете скинути префікс "-moz-".

Ще одна хитрість - використовувати той самий колір для верхнього та нижнього рядків, як і ваша межа. З усіма трьома кольорами однаково, він поєднується і виглядає як ідеально округлий стіл, навіть якщо це не фізично.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.