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?

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.

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.

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

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>

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

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.

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.

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.

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.

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

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.

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>

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

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 !*/

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

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 :)

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.

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

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

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

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

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

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>

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.