Get rid of the border-collapse: collapse;
rule.
How to add rounded corners to a table
-
28-06-2022 - |
Вопрос
It was my understanding that tables can have webkit border radius styles as other elements do:
HTML
<table class="list-table">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>tables are misunderstood</td>
</tr>
</tbody>
</table>
CSS
.list-table {
width: 100%;
padding: 0;
margin: 0;
text-align: center;
vertical-align: middle;
border: 4px solid red;
border-collapse: collapse;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
... so where am I going wrong? See here for a live demo: http://bootply.com/79469#
Решение
Другие советы
Put your table in a div and do your border radius on the div and not the table
div {
border: 4px solid red;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.list-table {
border-collapse: separate;
border-spacing: 0;
border: 4px solid red;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
Не связан с StackOverflow