Nemôžem nájsť zodpovedajúcu odpoveď.
<table class="table1">
<tr>
<td class="red header" colspan="4">
Table1 header</td>
</tr>
...
<tr>
<td class="red footer" colspan="4">Footer</td>
</tr>
<table class="table2">
<tr>
<td class="red header" colspan="4">
Table2 header</td>
</tr>
...
<tr>
<td class="red footer" colspan="4">Footer</td>
</tr>
table {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
}
.table1 {
border-spacing: 0;
}
.table2 {
border-collapse: collapse;
}
.footer {
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.header {
-moz-border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-bottom-top-radius: 5px;
-moz-border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
text-align: center;
}
td {
border: 1px solid #000;
}
Ako môžeš vidieť, table1
má hranicu 2px (ja chcem 1px), table2
nemá zaoblené hranice. border-collapse:collapse;
opravuje prvú chybu spôsobenú border-spacing: 0;
ale preruší zaokrúhľovanie. Môže mi niekto povedať spôsob, ako opraviť oba problémy bez toho, aby ste sa s tým pokazili :first-child
, last-child
atď.
odpovede:
0 pre odpoveď č. 1tu je moje pevné css:
table {
border:1px solid black;
border-radius: 5px;
border-spacing: 0;
}
table td:first-child, table td:not(:first-child):not(:last-child){
border-right:1px solid black;
}
table tr:first-child td, table tr:not(:last-child) td {
border-bottom:1px solid black;
}
table thead tr:first-child td:first-child {
-webkit-border-top-left-radius: 2px;
-moz-border-radius-topleft: 2px;
border-top-left-radius: 2px;
}
table thead tr:first-child td:last-child {
-webkit-border-top-right-radius:2px;
-moz-border-radius-topright: 2px;
border-top-right-radius: 2px;
}
table tbody tr:last-child td:first-child {
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-left-radius: 2px;
}
table tbody tr:last-child td:last-child {
-webkit-border-bottom-right-radius: 2px;
-moz-border-radius-bottomright: 2px;
border-bottom-right-radius: 2px;
}
môžete nastaviť okraj polomeru: 5px; akúkoľvek hodnotu a bude to perfektne fungovať!