Właściwość border-radius CSS3 i border-collapse: collapse nie mieszają się. Jak mogę użyć promienia obramowania, aby utworzyć zwinięty stół z zaokrąglonymi narożnikami?


317

Edit - Original Tytuł: Czy istnieje alternatywny sposób osiągnięcia border-collapse:collapsew CSS(w celu uzyskania upadł, zaokrąglony narożnik tabeli)?

Ponieważ okazuje się, że zwykłe zwinięcie granic tabeli nie rozwiązuje głównego problemu, zaktualizowałem tytuł, aby lepiej odzwierciedlić dyskusję.

Próbuję zrobić stół z zaokrąglonymi narożnikami, używając CSS3 border-radiuswłaściwości. Style tabel, których używam, wyglądają mniej więcej tak:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Oto problem. Chcę także ustawić border-collapse:collapsewłaściwość, a gdy zostanie border-radiusona ustawiona, przestanie działać. Czy istnieje sposób oparty na CSS, border-collapse:collapsedzięki któremu mogę uzyskać taki sam efekt, jak w rzeczywistości bez jego używania?

Edycje:

Stworzyłem prostą stronę, aby zademonstrować tutaj problem (tylko Firefox / Safari).

Wygląda na to, że duża część problemu polega na tym, że ustawienie tabeli zaokrąglonych narożników nie wpływa na narożniki tdelementów narożnych . Gdyby stół miał tylko jeden kolor, nie stanowiłoby to problemu, ponieważ mogłem po prostu tdzaokrąglić górne i dolne rogi odpowiednio dla pierwszego i ostatniego rzędu. Używam jednak różnych kolorów tła dla tabeli, aby odróżnić nagłówki i paski, więc tdelementy wewnętrzne będą również pokazywały zaokrąglone rogi.

Podsumowanie proponowanych rozwiązań:

Otaczanie stołu innym elementem z okrągłymi narożnikami nie działa, ponieważ kwadratowe narożniki stołu „krwawią”.

Podanie szerokości ramki na 0 nie powoduje zwinięcia tabeli.

Dolne tdrogi wciąż są kwadratowe po ustawieniu odstępu komórek na zero.

Zamiast tego użycie JavaScript - pozwala uniknąć problemu.

Możliwe rozwiązania:

Tabele są generowane w PHP, więc mógłbym po prostu zastosować inną klasę do każdego z zewnętrznych th / tds i stylizować każdy narożnik osobno. Wolałbym tego nie robić, ponieważ nie jest to zbyt eleganckie i trochę kłopotliwe dla wielu stołów, więc proszę o sugestie.

Możliwym rozwiązaniem 2 jest użycie JavaScript (w szczególności jQuery) do stylizacji narożników. To rozwiązanie również działa, ale wciąż nie do końca to, czego szukam (wiem, że jestem wybredny). Mam dwie rezerwacje:

  1. jest to bardzo lekka strona i chciałbym ograniczyć JavaScript do minimum
  2. częścią apelu, który ma dla mnie użycie granicy promienia, jest pełna wdzięku degradacja i stopniowe ulepszanie. Używając promienia obramowania dla wszystkich zaokrąglonych rogów, mam nadzieję, że będę mieć konsekwentnie zaokrągloną stronę w przeglądarkach obsługujących CSS3 i konsekwentnie kwadratową stronę w innych (patrzę na ciebie, IE).

Wiem, że próba zrobienia tego dzisiaj z CSS3 może wydawać się niepotrzebna, ale mam swoje powody. Chciałbym również zauważyć, że ten problem jest wynikiem specyfikacji w3c, a nie słabej obsługi CSS3, więc każde rozwiązanie będzie nadal odpowiednie i przydatne, gdy CSS3 będzie bardziej rozpowszechniony.


2
Nie możesz owinąć tabeli w div, ustawić promień obramowania i „przepełnienie: ukryte” na div? Właśnie przetestowałem i działa dobrze, chyba że potrzebujesz przewijania / rozwijania w div, który ma stałą szerokość / wysokość lub jego rodzice, którzy to robią.
Ian

Myślę, że w ostatniej instrukcji CSS nie ma średnika.
JensG,

3
To pytanie zostało zadane w 2009 roku. Jestem trochę zaskoczony, że w 2015 roku nie ma lepszych rozwiązań niż te wymienione poniżej. W3C powinien to naprawić kilka lat temu.
Jonathan M

Odpowiedzi:


241

Rozgryzłem to. Musisz tylko użyć specjalnych selektorów.

Problem z zaokrąglaniem rogów stołu polegał na tym, że elementy td również nie zostały zaokrąglone. Możesz rozwiązać ten problem, wykonując coś takiego:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

Teraz wszystko zaokrągla się poprawnie, z wyjątkiem tego, że wciąż istnieje problem border-collapse: collapsezepsucia wszystkiego.

Obejściem tego problemu jest dodanieborder-spacing: 0 i pozostawienie wartości domyślnej border-collapse: separatew tabeli.


75
Zamiast grzebać w HTML, dlaczego nie dodać border-spacing: 0;stylu obramowania?
Ramon Tayag,

3
Miałem problem z ustawieniem koloru tła znacznika TR zamiast znacznika TD. Upewnij się, że przy rozkładaniu stołu ustawiasz kolor tła niszczyciela, a nie TR.
Will Shaver,

Co się stanie, jeśli będziesz musiał użyć koloru tła na TR? Czy to w ogóle możliwe?
Mohoch

1
Po prostu dodając border-spacing: 0;tak, jak zalecił Ramon, naprawiłem to dla mnie. Upewnij się, że dodajesz style border-radiusi border-spacingdo elementów <th>lub <td>, a nie <thead>lub <tbody>.
Gavin

1
Używam bootstrap i znalazłem rozwiązanie, korzystając z rad Ramona, takich jak:border-spacing: 0; border-collapse: separate;
Caner SAYGIN

84

Poniższa metoda działa (przetestowana w Chrome) przy użyciu ramki box-shadowrozłożonej 1pxzamiast „rzeczywistej” ramki.

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
To jedyna rzecz, która dla mnie zadziałała. Właściwy kolor na granicy stołu jest jednak trudny.
Thomas Ahle,

Nie nadaje się do użytku, jeśli stół ma inny kolor tła niż otaczający obszar.
g.pickardou

1
Dziękujemy za kod, działa również z Firefoksem 26.0
maxivis

1
@ g.pickardou ten problem można rozwiązać, dodając element „przepełnienie: ukryty” do elementu tabeli.
Val

box-shadow sprawia, że ​​stół jest większy, więc boki zostają teraz odcięte.
Ray

63

Jeśli chcesz tylko rozwiązanie CSS (nie trzeba ustawiać cellspacing=0w kodzie HTML), które pozwala na obramowanie 1px (czego nie możesz zrobić z border-spacing: 0rozwiązaniem), wolę wykonać następujące czynności:

  • Ustaw a border-righti border-bottomdla swoich komórek tabeli ( tdi th)
  • Daj komórki w pierwszym rzędzie aborder-top
  • Daj komórki w pierwszej kolumnie aborder-left
  • Używanie first-childi last-childselektorów, okrągłe odpowiednich narożnikach dla komórek tabeli w czterech rogach.

Zobacz demo tutaj.

Biorąc pod uwagę następujący kod HTML:

ZOBACZ przykład poniżej:

   

 .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
Napisz odpowiedzi, które zawierają (stały) kod. Jeśli w odpowiedzi jest dużo kodu, wystarczy opublikować odpowiednie bity i wyjaśnienie, dlaczego są one istotne.
Samuel Harmer,

3
To świetne rozwiązanie, ale było trochę trudne do odczytania. Przepisałem niektóre reguły stylu i dodałem objaśnienie kodu, więc mam nadzieję, że to pomaga.
Michael Martin-Smucker

zastosuj promień również do stołu, albo dziwnie to wygląda, gdy zastosujesz tło do samego stołu.
koza

Co table.Infoklasa ma z tym wspólnego?
Pylinux

28

Czy próbowałeś używać table{border-spacing: 0}zamiast table{border-collapse: collapse}???


Dziękuję, pozwól mi zrobić to, co musiałem zrobić (który obejmował serię elementów TH u góry poza polem „Zaokrąglony róg” zawierającym wszystkie
niszczyciele czołowe

12
Problem border-spacing: 0polega na tym, że nie możesz mieć granicy 1px, prawda? Ponieważ granice układają się w stos zamiast się zwijać.
Michael Martin-Smucker

1
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;dał dokładnie to, czego potrzebowałem.
Milad.Nozari

23

Prawdopodobnie będziesz musiał umieścić wokół stołu kolejny element i nadać mu styl zaokrągloną ramkę.

Do pracy projekt określa, że border-radiusnie ma zastosowania do elementów tabeli, gdy wartość border-collapsejest collapse.


Zastanowiłem się nad tym, ale jeśli utworzę div, który otacza stół i ustawię go tak, aby miał zaokrąglone rogi, kwadratowe rogi stołu nadal będą krwawić. Zobacz nowo opublikowany przykład.
vamin

Najlepszym kompromisem, jaki udało mi się znaleźć, było dodanie do tabeli bloku THEAD i zastosowanie do niego szarego tła (z #eee na samym stole). Komórki nagłówka przepełniły się za ramką TABELI zamiast przed nią. Następnie zwiększyłem obramowanie tabeli do 3 pikseli, aby ukryć przepełnienie.
user59200

3
@vamin „krwawi” - nie, jeśli używaszoverflow:hidden;
Brian McCutchon

Tak więc w tej sytuacji każdy może skorzystać z mojego rozwiązania od dołu strony b2n.ir/table-radius
AmerllicA

15

Jak powiedział Ian, rozwiązaniem jest zagnieżdżenie tabeli w div i ustawienie jej w następujący sposób:

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

Dzięki overflow:hiddenkwadratowym rogom nie będzie krwawić przez div.


Należy pamiętać, że ktokolwiek chce go użyć, że przy overflow: hiddenkażdym popover / podpowiedzi zostanie przycięty przez wymiary opakowania.
user776686,

7

Według mojej najlepszej wiedzy, jedynym sposobem na zrobienie tego byłoby zmodyfikowanie wszystkich komórek w następujący sposób:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

A następnie, aby uzyskać granicę na dole i po prawej stronie

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-childnie jest ważny w ie6, ale jeśli używasz border-radius, zakładam, że cię to nie obchodzi.

EDYTOWAĆ:

Po spojrzeniu na przykładową stronę wydaje się, że możesz obejść ten problem za pomocą odstępów między komórkami i wypełniania.

Grube szare obramowania, które widzisz, są w rzeczywistości tłem stołu (możesz to wyraźnie zobaczyć, jeśli zmienisz kolor obramowania na czerwony). Jeśli ustawisz odstęp komórek na zero (lub równoważnie:), td, th { margin:0; }szare „ramki” znikną.

EDYCJA 2:

Nie mogę znaleźć sposobu na zrobienie tego tylko z jednym stołem. Jeśli zmienisz wiersz nagłówka na tabelę zagnieżdżoną, być może będziesz w stanie uzyskać pożądany efekt, ale będzie to więcej pracy, a nie dynamiki.


Dodałem przykład z odstępem komórek = 0 i jest on znacznie bliższy. Niepożądane granice znikają, ale dolne rogi wciąż się wykrwawiają.
vamin

Jeszcze raz dziękuję za pomoc. Tabele są generowane w php, więc myślę, że jeśli nie zaproponuje się eleganckiego rozwiązania, po prostu przypiszę klasę do każdego rogu th / td i stylizuję je osobno.
vamin

6

Próbowałem obejścia tego problemu przy użyciu pseudoelementów :beforeoraz :afterw thead th:first-childithead th:last-child

W połączeniu z zawijaniem stołu za pomocą <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;
}

patrz jsFiddle

Działa dla mnie w chrome (13.0.782.215) Daj mi znać, czy to działa dla Ciebie w innych przeglądarkach.


5

W rzeczywistości możesz dodać swoje tablewnętrze divjako opakowanie. a następnie przypisz te CSSkody do opakowania:

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

table {
  border-collapse: collapse;
}

4

Podane odpowiedzi działają tylko wtedy, gdy wokół stołu nie ma granic, co jest bardzo ograniczające!

Mam do tego makro w SASS, które w pełni obsługuje zewnętrzne i wewnętrzne granice, uzyskując taki sam styl jak zawijanie granic: zwijanie bez faktycznego jego określania.

Testowane w FF / IE8 / Safari / Chrome.

Daje ładne zaokrąglone krawędzie w czystym CSS we wszystkich przeglądarkach, ale IE8 (degraduje się z wdziękiem), ponieważ IE8 nie obsługuje promienia obramowania :(

Niektóre starsze przeglądarki mogą wymagać współpracy z prefiksami dostawcówborder-radius , więc w razie potrzeby dodaj te prefiksy do swojego kodu.

Ta odpowiedź nie jest najkrótsza - ale działa.

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

Aby zastosować ten styl, po prostu zmień swój

<table>

znacznik do następującego:

<table class="roundedTable">

i pamiętaj o dołączeniu powyższych stylów CSS do swojego HTML.

Mam nadzieję że to pomoże.


Nie potrzebujesz już prefiksów dla promienia granicy, spodziewaj się FF 3.6 (-moz). Ponadto -khtml z pewnością nie jest już potrzebny.
Jonatan Littke

@JonatanLittke, zawsze możesz edytować odpowiedź, jeśli uważasz, że można ją poprawić. Usunąłem wszystkie prefiksy i dodałem link do caniuse.com, aby ludzie mogli podejmować własne decyzje dotyczące prefiksów border-radius.
Michael Martin-Smucker

4

Dla graniczy i przewijalnej stole, to wykorzystać (zastąpić zmienne, $począwszy od tekstów)

Jeśli używasz thead, tfootlub th, po prostu zastąpić tr:first-child, a tr-last-childi tdz nimi.

#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

Miałem ten sam problem. usuń border-collapsecałkowicie i użyj: cellspacing="0" cellpadding="0" w dokumencie HTML. przykład:

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

To działa, ale wymaga późniejszego użycia sztuczek firstchild / lastchild, aby uzyskać efekt.
Thomas Ahle,

4

Właśnie napisałem zwariowany zestaw CSS, który wydaje się działać idealnie:

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

Rozwiązanie z zawinięciem granicy: osobne dla stołu i wyświetlacza: wbudowany stół dla osób i 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;        
}

nie ma powodu, aby tworzyć tę wiki wiki społeczności. Dzięki temu możesz uzyskać reputację swojej odpowiedzi.
tacaswell

3

Jestem nowy w HTML i CSS i szukałem rozwiązania tego problemu, tutaj znajdę.

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
}

Próbuję, zgadnij co to działa :)


3

Znalazłem tę odpowiedź po napotkaniu tego samego problemu, ale okazało się to dość proste: po prostu podaj przepełnienie tabeli: ukryte

Nie ma potrzeby owijania. To prawda, nie wiem, czy zadziałałoby to 7 lat temu, kiedy pytanie zostało pierwotnie zadane, ale teraz działa.


Jest to sprytne rozwiązanie, ale również „usuwa” faktyczną granicę. W przeglądarce Chrome prawa i dolna krawędź stołu znikają, a wszystkie zaokrąglone rogi nie mają obramowania.
Alex Jorgenson

3

Stół z zaokrąglonymi narożnikami i obrzeżami komórek. Korzystanie z rozwiązania @Ramon Tayag .

Kluczem jest użycie, border-spacing: 0jak wskazuje.

Rozwiązanie za pomocą 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

Zacząłem eksperymentować z „Display” i stwierdził, że: border-radius, border, margin, padding, w sposób tablewyświetlane są z:

display: inline-table;

Na przykład

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Ale potrzebujemy ustawić widthkażdą kolumnę

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

2

Oto najnowszy przykład implementacji tabeli z zaokrąglonymi rogami ze strony http://medialoot.com/preview/css-ui-kit/demo.html . Opiera się na specjalnych selektorach sugerowanych powyżej przez Joela Pottera. Jak widać, zawiera także trochę magii, aby IE był trochę szczęśliwy. Zawiera kilka dodatkowych stylów zmieniających kolor wierszy:

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

Oto sposób:

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

Lub

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


0

Zawsze tak robię za pomocą Sassa

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

Chyba nie możesz tego zrobić, on próbuje to zrobić z border-collapse: collapsewłączoną funkcją.
giovannipds

@giovannipds Spójrz na jego własną odpowiedź (zaakceptowana odpowiedź). Moja droga jest tylko inną drogą. Teraz usuń „-1”.
Diego Mello,

Och, przepraszam, zdecydowanie masz rację, mój błąd, jego zaakceptowana odpowiedź wydaje się mówić dokładnie to samo. Miałem trzymać się tego, co napisano w tytule pytania, podkreślił, że chce zawalenia granicy, więc od razu do niego podszedłem. Usunąłbym -1, gdybym mógł, ale nie mogę, musisz coś zmienić w odpowiedzi, aby mi na to pozwolić. Spróbuj wspomnieć coś o tym, że nie jest to możliwe border-collapse: collapse. Wybacz jeszcze raz, poczekam na twoją aktualizację.
giovannipds

0

Najlepsze jak dotąd rozwiązanie pochodzi z Twojego własnego rozwiązania i wygląda następująco:

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

Promień granicy jest teraz oficjalnie obsługiwany. Tak więc we wszystkich powyższych przykładach możesz upuścić prefiks „-moz-”.

Inną sztuczką jest użycie tego samego koloru dla górnego i dolnego rzędu, tak jak dla granicy. Wszystkie 3 kolory są takie same, wtapia się i wygląda jak idealnie zaokrąglony stół, nawet jeśli nie jest fizyczny.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.