Таблица HTML / CSS с закругленными углами и разделителями строк?
Я хотел бы сделать HTML-таблицу с закругленные углы и разделители строк.
Однако похоже, что они исключают друг друга:
делители строк
tr {border-bottom: 1px solid #000000}требуютborder-collapse: collapseна работустол закругленные углы
table { border-radius: 4px }не работают сborder-collapse: collapse
как я могу этого добиться?
радиус границы только до стола; для рядов я хотел бы просто прямую линию, чтобы разделить их
Ответы 2
не добавляйте радиус границы к самой таблице. попробуйте обернуть таблицу внутри элемента div, затем добавьте радиус границы к элементу div.
Вы можете обернуть table внутри div и присвоить этому div border-radius плюс overflow:hidden.
div - это элемент block, поэтому я использовал на нем display:table, чтобы получить ширину таблицы. Но можно использовать inline-block или другой.
Увидеть ниже
td {
padding: 10px;
background: red;
}
tr {
border-bottom: 2px solid #000000;
}
table {
border-collapse: collapse;
}
.wrapper {
border-radius: 10px;
border: 2px solid green;
display: table;
overflow: hidden;
}<div class = "wrapper">
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>@DanieleB рад, что смог помочь. Ваше здоровье ! : D
так вы хотите границу для строк и радиус границы для таблицы? или border-radius к строкам тоже?