表CSS样式|边框

Question

我真的需要一些CSS方面的帮助。

我正在尝试样式表，我有困难添加边框。

这是我想要的表格样式(ps): https://ibb.co/hFkCkDg

在表格周围添加边框很简单:

.table-class {
border: 1px solid #dddddd !important;
padding: 20px !important;
border-radius: 5px;
}

截图:https://ibb.co/Fs6qsNv

要在表中添加分隔线，我需要为表中的行添加顶部或底部边框。行是tr元素。默认情况下，表的tr元素不接受边界。所以为了克服这个问题，我在整个表中添加了{border-collapse: collapse !important;}，这允许我为行添加边框，但它混淆了整个表的边框。截图:https://ibb.co/Vgfq9jp

由于{border-collapse: collapse !important;}，属性border,padding,border-radius对表不起作用。

这意味着我可以在整个表格周围添加边框或添加分隔线，但不能同时添加。

我怎样才能达到我想要的样子?

Answer 1

我会使用flexbox，并将flex: 1或flex-grow: 1设置为第一个子每个"row">:

* {margin:0; box-sizing: border-box;}
body {font: 16px/1.4 'Varela Round', sans-serif; padding: 20px;} /* DEMO ONLY */
/*
Order
*/
.Order {
border-radius: 5px;
border: 1px solid #ddd;
padding: 10px 25px
}
.Order-price {
display: flex;
border-bottom: 1px solid #ddd;
}
.Order-price > * {
padding: 10px 0;
}
.Order-price > *:first-child{
flex: 1;
}
.Order-price:last-child {
border-bottom: none;
}
.Order-price--sub {
font-size: 1.2em;
font-weight: 500;
}
.Order-price--tot {
font-size: 1.4em;
font-weight: 700;
}
/*
Colors
*/
.color-lighter {
color: #999;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<div class="Order">
<div class="Order-price">
<span class="color-lighter">Custom Tatoo Design - Small &times; 1</span>
<span><s class="color-lighter">$99.00</s> <b>$80.00</b></span>
</div>
<div class="Order-price Order-price--sub">
<span>Subtotal</span>
<span>$80.00</span>
</div>
<div class="Order-price Order-price--tot">
<span>Total</span>
<span><small>USD</small> $80.00</span>
</div>
</div>

Answer 2

使用表格边框很无聊，我的建议是在td/th元素中使用边框。

我创建了这个没有样式的表，只解决了边界的问题

.table-class {
border: 1px solid #dddddd;
border-radius: 6px;
padding: 30px;
border-spacing: unset;
font-family: sans-serif;
font-size: 1.5em;
}
.table-class thead th {
border-bottom: 1px solid #dddddd;
text-align: left;
}
.table-class tbody td {
border-bottom: 1px solid #dddddd;
}
.table-class td:last-child, .table-class th:last-child {
text-align: right;
}
.table-class th, .table-class td{
padding: 10px;
}

<table class="table-class">
<thead>
<tr>
<th>Custom Tattoo Desing - Small x 1</th>
<th>
<span><s>$99.00</s></span>
<span>$80.00</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Subtotal</td>
<td>$80.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>USD $80.00</td>
</tr>
</tfoot>
</table>