Ik heb gezocht en gezocht, maar heb geen oplossing kunnen vinden voor mijn eis.
Ik heb een eenvoudige, oude HTML-tabel. Ik wil er ronde hoeken voor, zonderafbeeldingen of JS te gebruiken, d.w.z. pure alleen CSS. Zoals dit:
Afgeronde hoeken voor hoekcellen en 1pxdikke rand voor de cellen.
Tot nu toe heb ik dit:
table {
-moz-border-radius: 5px !important;
border-collapse: collapse !important;
border: none !important;
}
table th,
table td {
border: none !important
}
table th:first-child {
-moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
-moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
-moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
-moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
background-color: #ddd !important
}
Maar dan heb ik geen grenzen voor de cellen. Als ik randen toevoeg, zijn ze niet afgerond!
Enige oplossingen?
Antwoord 1, autoriteit 100%
Lijkt prima te werken in FF en Chrome (heb geen andere getest) met aparte randen: http:/ /jsfiddle.net/7veZQ/3/
Bewerken: hier is een relatief schone implementatie van je schets:
table {
border-collapse:separate;
border:solid black 1px;
border-radius:6px;
-moz-border-radius:6px;
}
td, th {
border-left:solid black 1px;
border-top:solid black 1px;
}
th {
background-color: blue;
border-top: none;
}
td:first-child, th:first-child {
border-left: none;
}<table>
<thead>
<tr>
<th>blah</th>
<th>fwee</th>
<th>spoon</th>
</tr>
</thead>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
</table>2, Autoriteit 29%
Voor mij, de Twitter bootstrap-oplossing ziet er goed uit. Het sluit ie & lt uit; 9 (geen ronde hoeken in IE 8 en lager), maar dat is O.K. Ik denk dat als je prospectieve web-apps ontwikkelt.
CSS / HTML:
table {
border: 1px solid #ddd;
border-collapse: separate;
border-left: 0;
border-radius: 4px;
border-spacing: 0px;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
border-collapse: separate;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
th, td {
padding: 5px 4px 6px 4px;
text-align: left;
vertical-align: top;
border-left: 1px solid #ddd;
}
td {
border-top: 1px solid #ddd;
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
border-radius: 0 0 0 4px;
}<table>
<thead>
<tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
</thead>
<tbody>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
</tbody>
</table>3, Autoriteit 18%
Ten eerste heb je meer dan alleen -moz-border-radiusnodig als je alle browsers wilt ondersteunen. U moet alle varianten specificeren, inclusief gewone border-radius, als volgt:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
Ten tweede, om rechtstreeks uw vraag te beantwoorden, border-radiusgeeft geen grens weer; Het zet gewoon hoe de hoeken van de grens zien, als er een is.
Om de rand in te schakelen en dus uw afgeronde hoeken te krijgen, hebt u ook de borderattribuut op uw tden thelementen.
td, th {
border:solid black 1px;
}
Je ziet de afgeronde hoeken ook als je een achtergrondkleur (of afbeelding) hebt, hoewel deze natuurlijk een andere achtergrondkleur moet hebben dan het omringende element om de afgeronde hoeken zonder rand zichtbaar te maken.
Het is vermeldenswaard dat sommige oudere browsers er niet van houden om border-radiusop tabellen/tabelcellen te plaatsen. Het kan de moeite waard zijn om een <div>in elke cel te plaatsen en die in plaats daarvan te stylen. Dit zou echter geen invloed moeten hebben op de huidige versies van browsers (behalve IE, die helemaal geen afgeronde hoeken ondersteunt – zie hieronder)
Ten slotte, niet dat IE border-radiushelemaal niet ondersteunt (IE9 beta wel, maar de meeste IE-gebruikers zullen IE8 of minder gebruiken). Als je IE wilt hacken om border-radius te ondersteunen, kijk dan op http://css3pie.com/
[EDIT]
Ok, dit stoorde me, dus ik heb wat getest.
Hier is een JSFiddle-voorbeeld waarmee ik heb gespeeld
Het lijkt erop dat het belangrijkste dat je miste border-collapse:separate;was op het table-element. Dit voorkomt dat de cellen hun randen aan elkaar koppelen, waardoor ze de grensradius kunnen oppikken.
Hopelijk helpt dat.
Antwoord 4, autoriteit 17%
Het geselecteerde antwoord is verschrikkelijk. Ik zou dit implementeren door de hoektabelcellen te targeten en de bijbehorende randradius toe te passen.
Om de bovenhoeken te krijgen, stelt u de randradius in op het eerste en laatste type van de deelementen en eindigt u met het instellen van de randradius op de laatste en eerste van tdtyp op de laatste van het type trom de onderste hoeken te krijgen.
th:first-of-type {
border-top-left-radius: 10px;
}
th:last-of-type {
border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
border-bottom-right-radius: 10px;
}
Antwoord 5, autoriteit 8%
De beste oplossing die ik heb gevonden voor afgeronde hoeken en ander CSS3-gedrag voor IE<9 is hier te vinden: http:// css3pie.com/
Download de plug-in, kopieer naar een map in uw oplossingsstructuur. Zorg er dan voor dat je in je stylesheet de gedragstag hebt zodat deze de plug-in binnenhaalt.
Eenvoudig voorbeeld van mijn project dat me afgeronde hoeken, kleurverloop en kaderschaduw voor mijn tafel geeft:
.table-canvas
{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
overflow:hidden;
border-radius: 10px;
-pie-background: linear-gradient(#ece9d8, #E5ECD8);
box-shadow: #666 0px 2px 3px;
behavior: url(Include/PIE.htc);
overflow: hidden;
}
Maak je geen zorgen als je Visual Studio CSS-intellisense je de groene onderstreping geeft voor onbekende eigenschappen, het werkt nog steeds als je het uitvoert. Sommige elementen zijn niet erg duidelijk gedocumenteerd, maar de voorbeelden zijn redelijk goed, vooral op de voorpagina.
Antwoord 6, autoriteit 6%
Door persoonlijke ervaring heb ik ontdekt dat het niet mogelijk is om hoeken van een HTML-tabel celaf te ronden met pure CSS. Het is mogelijk om de buitenste rand van een tafel af te ronden.
Je zult je toevlucht moeten nemen tot het gebruik van afbeeldingen zoals beschreven in deze tutorial, of iets dergelijks 🙂
Antwoord 7, autoriteit 6%
Het is een beetje ruw, maar hier is iets dat ik heb samengesteld dat volledig uit CSS en HTML bestaat.
- Buitenhoeken afgerond
- Koptekstrij
- Meerdere gegevensrijen
Dit voorbeeld maakt ook gebruik van de :hoverpseudo-klasse voor elke datacel <td>. Elementen kunnen eenvoudig worden bijgewerkt om aan uw behoeften te voldoen en de muisaanwijzer kan snel worden uitgeschakeld.
(Ik heb de :hoverechter nog niet goed laten werken voor volledige rijen <tr>. De laatste zwevende rij wordt niet weergegeven met afgeronde hoeken op onderaan. Ik weet zeker dat er iets eenvoudigs over het hoofd wordt gezien.)
table.dltrc {
width: 95%;
border-collapse: separate;
border-spacing: 0px;
border: solid black 2px;
border-radius: 8px;
}
tr.dlheader {
text-align: center;
font-weight: bold;
border-left: solid black 1px;
padding: 2px
}
td.dlheader {
background: #d9d9d9;
text-align: center;
font-weight: bold;
border-left: solid black 1px;
border-radius: 0px;
padding: 2px
}
tr.dlinfo,
td.dlinfo {
text-align: center;
border-left: solid black 1px;
border-top: solid black 1px;
padding: 2px
}
td.dlinfo:first-child,
td.dlheader:first-child {
border-left: none;
}
td.dlheader:first-child {
border-radius: 5px 0 0 0;
}
td.dlheader:last-child {
border-radius: 0 5px 0 0;
}
/*===== hover effects =====*/
/*tr.hover01:hover,
tr.hover02:hover {
background-color: #dde6ee;
}*/
/* === ROW HOVER === */
/*tr.hover02:hover:last-child {
background-color: #dde6ee;
border-radius: 0 0 6px 6px;
}*/
/* === CELL HOVER === */
td.hover01:hover {
background-color: #dde6ee;
}
td.hover02:hover {
background-color: #dde6ee;
}
td.hover02:first-child {
border-radius: 0 0 0 6px;
}
td.hover02:last-child {
border-radius: 0 0 6px 0;
}<body style="background:white">
<br>
<center>
<table class="dltrc" style="background:none">
<tbody>
<tr class="dlheader">
<td class="dlheader">Subject</td>
<td class="dlheader">Title</td>
<td class="dlheader">Format</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">One</td>
<td class="dlinfo hover01">Two</td>
<td class="dlinfo hover01">Three</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">Four</td>
<td class="dlinfo hover01">Five</td>
<td class="dlinfo hover01">Six</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">Seven</td>
<td class="dlinfo hover01">Eight</td>
<td class="dlinfo hover01">Nine</td>
</tr>
<tr class="dlinfo2 hover02">
<td class="dlinfo hover02">Ten</td>
<td class="dlinfo hover01">Eleven</td>
<td class="dlinfo hover02">Twelve</td>
</tr>
</tbody>
</table>
</center>
</body>8
voeg een <div>wrapper rond de tafel en pas de volgende CSS
toe
border-radius: x px;
overflow: hidden;
display: inline-block;
naar deze wrapper.
9
Om @luke meelnoy’s brilliant antwoord aan te passen – en als u niet thin uw tabel gebruikt, is hier alle CSS die u nodig hebt om een afgeronde tafel te maken:
.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.my_table tr:first-of-type {
border-top-left-radius: 10px;
}
.my_table tr:first-of-type td:last-of-type {
border-top-right-radius: 10px;
}
.my_table tr:last-of-type td:first-of-type {
border-bottom-left-radius: 10px;
}
.my_table tr:last-of-type td:last-of-type {
border-bottom-right-radius: 10px;
}
10
U kunt dit proberen als u de afgeronde hoeken aan elke kant van de tabel wilt zonder de cellen aan te raken: http: //jsfiddle.net/7vezq/3983/
<table>
<tr class="first-line"><td>A</td><td>B</td></tr>
<tr class="last-line"><td>C</td><td>D</td></tr>
</table>
11
Voorbeeld HTML
<table class="round-corner" aria-describedby="caption">
<caption id="caption">Table with rounded corners</caption>
<thead>
<tr>
<th scope="col">Head1</th>
<th scope="col">Head2</th>
<th scope="col">Head3</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="rowgroup">tbody1 row1</td>
<td scope="rowgroup">tbody1 row1</td>
<td scope="rowgroup">tbody1 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody1 row2</td>
<td scope="rowgroup">tbody1 row2</td>
<td scope="rowgroup">tbody1 row2</td>
</tr>
</tbody>
<tbody>
<tr>
<td scope="rowgroup">tbody2 row1</td>
<td scope="rowgroup">tbody2 row1</td>
<td scope="rowgroup">tbody2 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody2 row2</td>
<td scope="rowgroup">tbody2 row2</td>
<td scope="rowgroup">tbody2 row2</td>
</tr>
</tbody>
<tbody>
<tr>
<td scope="rowgroup">tbody3 row1</td>
<td scope="rowgroup">tbody3 row1</td>
<td scope="rowgroup">tbody3 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody3 row2</td>
<td scope="rowgroup">tbody3 row2</td>
<td scope="rowgroup">tbody3 row2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td scope="col">Foot</td>
<td scope="col">Foot</td>
<td scope="col">Foot</td>
</tr>
</tfoot>
</table>
SCSS, eenvoudig geconverteerd naar CSS, gebruik Sassmeister.com
// General CSS
table,
th,
td {
border: 1px solid #000;
padding: 8px 12px;
}
.round-corner {
border-collapse: collapse;
border-style: hidden;
box-shadow: 0 0 0 1px #000; // fake "border"
border-radius: 4px;
// Maybe there's no THEAD after the caption?
caption + tbody {
tr:first-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}
td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}
tbody:first-child {
tr:first-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}
td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}
tbody:last-child {
tr:last-child {
td:first-child,
th:first-child {
border-bottom-left-radius: 4px;
}
td:last-child,
th:last-child {
border-bottom-right-radius: 4px;
border-right: none;
}
}
}
thead {
tr:last-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}
td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}
tfoot {
tr:last-child {
td:first-child,
th:first-child {
border-bottom-left-radius: 4px;
}
td:last-child,
th:last-child {
border-bottom-right-radius: 4px;
border-right: none;
}
}
}
// Reset tables inside table
table tr th,
table tr td {
border-radius: 0;
}
}
http://jsfiddle.net/MuTLY/xqrgo466/
Antwoord 12
Het volgende is iets dat ik heb gebruikt dat voor mij werkte in alle browsers, dus ik hoop dat het iemand in de toekomst helpt:
#contentblock th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
behavior: url(/images/border-radius.htc);
border-radius: 6px 0 0 0;
}
#contentblock th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
behavior: url(/images/border-radius.htc);
border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
border-radius: 0 0 6px 0;
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
behavior: url(/images/border-radius.htc);
border-radius: 0 0 6px 0;
}
#contentblock tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
behavior: url(/images/border-radius.htc);
border-radius: 0 0 0 6px;
}
Uiteraard kan het gedeelte #contentblocknaar behoefte worden vervangen/bewerkt en kunt u het bestand border-radius.htcvinden door te zoeken in Google of uw favoriete internet browser.
Antwoord 13
Dit is css3, alleen een recente niet-IE<9 browser zal dit ondersteunen.
Bekijk hier, het leidt de ronde eigenschap af voor alle beschikbare browsers
Antwoord 14
Toevoegen tussen <head>tags:
<style>
td {background: #ffddaa; width: 20%;}
</style>
en in het lichaam:
<div style="background: black; border-radius: 12px;">
<table width="100%" style="cell-spacing: 1px;">
<tr>
<td style="border-top-left-radius: 10px;">
Noordwest
</td>
<td> </td>
<td>Noord</td>
<td> </td>
<td style="border-top-right-radius: 10px;">
Noordoost
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>West</td>
<td> </td>
<td>Centrum</td>
<td> </td>
<td>Oost</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-bottom-left-radius: 10px;">
Zuidwest
</td>
<td> </td>
<td>Zuid</td>
<td> </td>
<td style="border-bottom-right-radius: 10px;">
Zuidoost
</td>
</tr>
</table>
</div>
De celkleur, inhoud en opmaak zijn natuurlijk bijvoorbeeld;
het gaat over het plaatsen van met kleur gevulde cellen binnen een div.
Als u dit doet, zijn de zwarte celranden/tabelrand in feite de achtergrondkleur van de div.
Houd er rekening mee dat u de div-borderradius ongeveer 2 waarden groter moet instellen dan de afzonderlijke celhoekrandradii, om een vloeiend afgerond hoekeffect te krijgen.
Antwoord 15
Les in tabelranden…
OPMERKING: de onderstaande HTML/CSS-code mag alleen in IE worden bekeken. De code wordt niet correct weergegeven in Chrome!
We moeten onthouden dat:
-
Een tabel heeft een rand: de buitenste grens (die ook een grensradius kan hebben.)
-
De cellen zelf hebben OOK randen (die ook een grensradius kunnen hebben.)
-
De tabel- en celranden kunnen met elkaar interfereren:
De celrand kan door de tabelrand heen steken (dwz: tabelgrens).
Om dit effect te zien, wijzigt u de CSS-stijlregels in de onderstaande code als volgt:
l. tabel {border-collapse: apart;}
ii. Verwijder de stijlregels die de hoekcellen van de tabel omsluiten.
iii. Speel dan met border-spatiëring zodat je de interferentie kunt zien. -
De tabelrand en celranden kunnen echter INGESCHAKELD worden (met: border-collapse:collaps;).
-
Als ze zijn samengevouwen, interfereren de cel- en tabelranden op een andere manier:
ik. Als de tabelrand is afgerond maar de celranden vierkant blijven, heeft de vorm van de cel voorrang en verliest de tabel de gebogen hoeken.
ii. Omgekeerd, als de hoekcellen gekromd zijn maar de tafelgrens vierkant is, dan zul je een lelijke vierkante hoek zien die grenst aan de kromming van de hoekcellen.
-
Aangezien het kenmerk van die cel voorrang heeft, is de manier om de vier hoeken van de tafel af te ronden:
ik. Inklappende randen op de tafel (met: border-collapse: collaps;).
II. Uw gewenste kromming instellen op de hoekcellen van de tabel.
III. Het maakt niet uit of de hoek van de tafel is afgerond (dwz: de rand-straal kan nul zijn).
.zui-table-rounded {
border: 2px solid blue;
/*border-radius: 20px;*/
border-collapse: collapse;
border-spacing: 0px;
}
.zui-table-rounded thead th:first-child {
border-radius: 30px 0 0 0;
}
.zui-table-rounded thead th:last-child {
border-radius: 0 10px 0 0;
}
.zui-table-rounded tbody tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
.zui-table-rounded tbody tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
.zui-table-rounded thead th {
background-color: #CFAD70;
}
.zui-table-rounded tbody td {
border-top: solid 1px #957030;
background-color: #EED592;
} <table class="zui-table-rounded">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>16
Aangezien geen van de hogere, beoordeelde oplossingen voor mij werkte, omdat ik met een tafel werk, heeft dat een alternerend kleurenschema, heb ik het geprobeerd en kreeg uiteindelijk mijn oplossing op basis van de oplossing, @ [Luke Flournoy].
In feite de oplossing met het plaatsen van een afgeronde rand op de tafel werkt – maar wanneer u een achtergrondkleur op een tabelrij of werkt of werkt met een aangewezen tabelkop, overschrijft het de algehele tabelinstelling en wordt deze weergegeven als een rechthoek.
De oplossingen van Luke doelen alleen de specifieke hoekcellen, die me bij het idee hebben, dat ik misschien ook de wisselende achtergrondkleur op de cellen van die rij zou moeten toepassen en niet de rij zelf. TD toevoegen aan het TR: NTH-kind deed de truc. Hetzelfde geldt als je een derde kleur op tafelhoofd wilt gebruiken. U kunt dit in het onderstaande code-fragment bekijken.
Ik heb geen andere oplossing gezien die echt werkt met achtergrondkleuren en vooral niet met verschillende kleuren in één tabel, dus ik hoop dat deze degenen helpt die meer nodig hebben dan alleen een effen eenkleurige tabel. Beoordeel dit als het je heeft geholpen, zodat het naar de top gaat. Er zijn hier veel moeilijke en niet erg nuttige antwoorden, dus.
Hier is een overzicht van mijn resultaat https://i.stack.imgur.com/XHOEN .png
En hier is de code ervoor:
.LezzonPrize{
text-align: center;
line-height: 1.8rem;
border-collapse: collapse;
border-radius: 36px;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
background-color: #FCF3C6;
}
.LezzonPrize thead th{
background-color:#FFCF5A;
}
.LezzonPrize thead th:first-child{
border-radius: 36px 0 0 0;
}
.LezzonPrize thead th:last-child{
border-radius: 0 36px 0 0;
}
.LezzonPrize th{
text-align: center;
vertical-align: middle;
line-height: 1.8rem;
font-weight: 700;
text-transform: none;
border-bottom:
2px solid #3F5A1B;
}
.LezzonPrize td:first-child{
text-align:left;
}
.LezzonPrize td{
font-size:18px;
}
.LezzonPrize tr:nth-child(2n-1) td{
background-color: #F3CF87;
}
.LezzonPrize tr:last-child td:first-child{
border-radius: 0 0 0 36px;
-moz-border-radius: 0 0 0 36px;
-webkit-border-radius: 0 0 0 36px;
}
.LezzonPrize tr:last-child td:last-child{
border-radius: 0 0 36px 0;
-moz-border-radius: 0 0 36px 0;
-webkit-border-radius: 0 0 36px 0;
} <table class="LezzonPrize" width="100%">
<thead>
<tr>
<th width="32%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td colspan="5">Try deleting this to confirm that the round corners also work on the 2nth-child table rows</td>
</tr>
</tbody>
</table>Antwoord 17
CSS:
table {
border: 1px solid black;
border-radius: 10px;
border-collapse: collapse;
overflow: hidden;
}
td {
padding: 0.5em 1em;
border: 1px solid black;
}