Właściwość border-radius CSS3 i border-collapse: collapse nie mieszają się. Jak za pomocą border-radius utworzyć zwiniętą tabelę z zaokrąglonymi narożnikami?
Edit-oryginalny tytuł: Czy istnieje alternatywny sposób na osiągnięcie border-collapse:collapse
w CSS
(aby mieć zwinięty, zaokrąglony narożnik tabeli)?
Ponieważ okazuje się, że samo zawalenie obramowań tabeli nie rozwiązuje problemu głównego, zaktualizowałem tytuł, aby lepiej odzwierciedlał dyskusję.
Staram się zrobić stół z zaokrąglonymi narożnikami używając CSS3
border-radius
własność. Style tabeli, których używam, wyglądają jak to:
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
Oto problem. Chcę również ustawić właściwość border-collapse:collapse
, A gdy jest ona ustawiona border-radius
, nie działa. Czy istnieje sposób oparty na CSS, w jaki mogę uzyskać taki sam efekt jak border-collapse:collapse
bez użycia go?
Edits:
Zrobiłem prostą stronę, aby zademonstrować problem tutaj (tylko Firefox/Safari).
Wydaje się, że duża część problemu polega na tym, że ustawienie stołu na zaokrąglone narożniki nie wpływa na narożniki narożnika td
elementy. Gdyby tabela była w jednym kolorze, nie byłoby to problemem, ponieważ mógłbym po prostu zaokrąglać górne i dolne rogi td
odpowiednio dla pierwszego i ostatniego rzędu. Jednak używam różnych kolorów tła dla tabeli w celu rozróżnienia nagłówków i pasków, więc wewnętrzne elementy td
pokazywałyby również ich 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ą."
Określenie szerokości ramki na 0 nie powoduje zwinięcia tabeli.
Dolny td
narożniki nadal kwadratowe po ustawieniu cellspacing na zero.
Zamiast tego używanie JavaScript-działa unikając problemu.
Możliwe rozwiązania:
Tabele są generowane w PHP, więc mogę po prostu zastosować inną klasę do każdego zewnętrznego th / tds i stylować każdy róg osobno. Wolałabym nie robić to, ponieważ nie jest bardzo elegancki i trochę bólu, aby zastosować do wielu tabel, więc proszę zachować sugestie najbliższych.
Możliwe rozwiązanie 2 to użycie JavaScript (w szczególności jQuery) do stylizacji narożników. To rozwiązanie również działa, ale nadal nie do końca to, czego szukam (wiem, że jestem wybredny). Mam dwa zastrzeżenia:
-
Jest to bardzo lekka strona i chciałbym utrzymać JavaScript do najmniejszego minimum.]}
- część odwołania, że przy użyciu border-radius ma dla mnie jest pełna wdzięku degradacja i stopniowe Ulepszanie. Korzystając z border-radius dla wszystkich zaokrąglonych narożników, mam nadzieję, że konsekwentnie zaokrąglona strona w przeglądarkach obsługujących CSS3 i konsekwentnie kwadratowa strona w innych (patrzę na Ciebie, IE).
Wiem, że próba zrobienia tego z CSS3 dzisiaj może wydawać się niepotrzebna, ale mam swoje powody. Chciałbym również zaznaczyć, że ten problem jest wynikiem specyfikacji w3c, a nie słabej obsługi CSS3, więc każde rozwiązanie nadal będzie istotne i przydatne, gdy CSS3 ma bardziej powszechne wsparcie.
24 answers
Rozgryzłem to. Wystarczy użyć specjalnych selektorów.
Problem z zaokrągleniem narożników stołu polegał na tym, że elementy td również nie zostały zaokrąglone. Możesz to rozwiązać, robią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 obraca się prawidłowo, z wyjątkiem tego, że jest jeszcze kwestia border-collapse: collapse
łamania wszystkiego.
Obejściem jest dodanie border-spacing: 0
i zostaw domyślną border-collapse: separate
na stole.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-15 01:57:26
Poniższa metoda działa (testowana w Chrome), używając box-shadow
z rozłożeniem 1px
zamiast "rzeczywistej" granicy.
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;
}
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baz</td>
<td>Qux</td>
</tr>
<tr>
<td>Life is short</td>
<td rowspan="3">and</td>
</tr>
<tr>
<td>Love</td>
</tr>
<tr>
<td>is always over</td>
</tr>
<tr>
<td>In the</td>
<td>Morning</td>
</tr>
</tbody>
</table>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-25 17:20:41
Jeśli chcesz mieć rozwiązanie oparte tylko na CSS (bez potrzeby ustawiania cellspacing=0
w HTML), które pozwala na obramowanie 1px (czego nie możesz zrobić z rozwiązaniem border-spacing: 0
), wolę zrobić następujące rzeczy:
- Ustaw
border-right
iborder-bottom
dla komórek tabeli (td
ith
) - podaj komórki w pierwszy wiersz a
border-top
- podaj komórki w pierwszej kolumnie a
border-left
- używając selektorów
first-child
ilast-child
, zaokrąglaj odpowiednie rogi komórek tabeli w cztery kąty.
Podano następujący 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-27 11:49:48
Czy próbowałeś użyć table{border-spacing: 0}
zamiast table{border-collapse: collapse}
???
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-18 04:16:58
Prawdopodobnie będziesz musiał umieścić inny element wokół stołu i styl, który z zaokrągloną obwódką.
Roboczy szkic określa, że border-radius
nie ma zastosowania do elementów tabeli, gdy wartość border-collapse
wynosi collapse
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-10 17:37:58
Jak powiedział Ian, rozwiązaniem jest zagnieżdżenie tabeli wewnątrz div I ustawienie go w ten sposób:
.table_wrapper {
border-radius: 5px;
overflow: hidden;
}
Z overflow:hidden
, kwadratowe rogi nie będą krwawić przez div.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-10 17:01:36
Według mojej najlepszej wiedzy, jedynym sposobem, aby to zrobić, byłoby zmodyfikowanie wszystkich komórek w ten sposób: {]}
table td {
border-right-width: 0px;
border-bottom-width: 0px;
}
A następnie uzyskać obramowanie 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-child
nie jest poprawny w ie6, ale jeśli używasz border-radius
zakładam, że cię to nie obchodzi.
EDIT:
Po przejrzeniu przykładowej strony wydaje się, że możesz obejść tę kwestię z odstępami między komórkami i wypełnieniami.
Grube szare granice, które widzisz, są w rzeczywistości tło tabeli (widać to wyraźnie, jeśli zmienisz kolor obramowania na czerwony). Jeśli ustawisz cellspacing na zero (lub równoważnie: td, th { margin:0; }
), szare "obramowania" znikną.
Edytuj 2:
Nie mogę znaleźć sposobu, aby to zrobić tylko z jednym stołem. Jeśli zmienisz wiersz nagłówka na zagnieżdżoną tabelę, możesz uzyskać pożądany efekt, ale będzie to bardziej pracochłonne, a nie dynamiczne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-10 17:16:33
Próbowałem obejścia używając pseudo elementów :before
i :after
na thead th:first-child
i thead th:last-child
W połączeniu z owijaniem tabeli <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;
}
Zobacz jsFiddle
Działa dla mnie w chrome (13.0.782.215) Daj mi znać, jeśli działa to dla Ciebie w innych przeglądarkach.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-25 20:43:40
Podane odpowiedzi działają tylko wtedy, gdy nie ma granic wokół stołu, co jest bardzo ograniczające!
Mam do tego makro w SASS, które w pełni obsługuje Zewnętrznei wewnętrzne granice, uzyskując taką samą stylizację jak border-collapse: collapse bez faktycznego jej określenia.
Testowane w FF/IE8/Safari / Chrome.
Daje ładne zaokrąglone obramowania w czystym CSS we wszystkich przeglądarkach, ale IE8 (degraduje wdzięcznie) , ponieważ IE8 nie obsługuje border-radius : (
Niektóre starsze przeglądarki mogą wymagać prefiksów dostawcy do pracy z border-radius
, więc w razie potrzeby dodaj te prefiksy do 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>
Tag to the following:
<table class="roundedTable">
I pamiętaj, aby dołączyć powyższe style CSS do twojego HTML.
Mam nadzieję, że to pomoże.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-18 12:10:53
W rzeczywistości możesz dodać swoje table
wewnątrz div
jako jego opakowanie. a następnie przypisz te CSS
Kody do wrappera:
.table-wrapper {
border: 1px solid #f00;
border-radius: 5px;
overflow: hidden;
}
table {
border-collapse: collapse;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-24 11:45:08
Dla obramowanej i przewijalnej tabeli, użyj tego (zamień zmienne, $
teksty początkowe)
Jeśli używasz thead
, tfoot
lub th
, po prostu zastąp tr:first-child
i tr-last-child
i td
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-08 15:26:01
Miałem ten sam problem.
Usuń border-collapse
CAŁKOWICIE i użyj:
cellspacing="0" cellpadding="0"
w dokumencie html.
przykład:
<table class="top_container" align="center" cellspacing="0" cellpadding="0">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-10 16:57:54
Właśnie napisałem do tego szalony 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 !*/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-10 17:03:23
Rozwiązanie z border-collapse:separate dla table i display: inline-table dla tbody 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-28 18:32:53
Jestem nowy w HTML i CSS i również szukałem rozwiązania dla tego, tutaj co znalazłem.
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:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-08 21:59:09
Znalazłem tę odpowiedź po napotkaniu tego samego problemu, ale okazało się, że jest to dość proste: wystarczy podać przepełnienie tabeli: hidden
Nie ma potrzeby stosowania elementu zawijającego. Przyznam, że nie wiem, czy to zadziałałoby 7 lat temu, gdy pytanie zostało początkowo zadane, ale teraz działa.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-27 17:23:10
Tabela z zaokrąglonymi narożnikami i obramowanymi komórkami. Using @Ramon Tayag solution.
Kluczem jest użycie border-spacing: 0
jak zaznacza.
Rozwiązanie przy użyciu 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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-25 17:17:06
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-14 11:13:17
Zacząłem eksperymentować z "wyświetlaczem" i stwierdziłem, że: border-radius
, border
, margin
, padding
, W table
są wyświetlane 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 musimy ustawić width
każdej kolumny
tr td.first-column {
width: 100px;
}
tr td.second-column {
width: 860px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-19 22:01:28
Oto najnowszy przykład jak zaimplementować tabelę z zaokrąglonymi rogami z http://medialoot.com/preview/css-ui-kit/demo.html. opiera się na specjalnych selektorach zaproponowanych przez Joela Pottera powyżej. Jak widać, zawiera również trochę magii, aby IE było trochę szczęśliwe. Zawiera kilka dodatkowych stylów do zmiany koloru 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-10 17:00:28
Najprostszy sposób...
table {
border-collapse: inherit;
border: 1px solid black;
border-radius: 5px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-30 06:20:10
Zawsze tak robię używając 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;
}
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-11 16:54:45
Najlepsze rozwiązanie do tej pory pochodzi z twojego własnego rozwiązania i wygląda tak:
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-15 01:40:45
Border-radius jest teraz oficjalnie wspierany. Tak więc we wszystkich powyższych przykładach możesz upuścić przedrostek " - moz -".
Kolejną sztuczką jest użycie tego samego koloru dla górnego i dolnego wiersza, co obramowanie. Wszystkie 3 kolory są takie same, wtapia się i wygląda jak idealnie zaokrąglony stół, mimo że nie jest fizycznie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-17 00:38:21