我真的需要一些 CSS 的帮助。
我试图风格表,我有困难添加边框。
这是我要的表格样式(Photoshop):s://ibb.co/hFkCkDg
在表周围添加边框很简单:
.table-class {
border: 1px solid #dddddd !important;
padding: 20px !important;
border-radius: 5px;
}
要在表中添加分隔线,我需要在表中的行添加顶部或底部边框。行是tr
元素。默认情况下,表的tr
元素不接受边框。因此,为了克服这个问题,我在整个表中添加了{border-collapse: collapse !important;}
,这允许我在行 /周围添加边框。截图:
由于{border-collapse: collapse !important;}
,属性border
、padding
、border-radius
不适用于表。
这意味着我可以在整个表周围添加边框或添加分隔线,但不能同时添加。
我怎样才能实现我要的外观?
我会使用 flexbox,并将flex: 1
或flex-grow: 1
设置为每个“行”的第一个子:
* {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" xxx="s://fonts.gstatic">
<link xxx="s://fonts.googlea/css2?family=Varela+Round&display=swap" rel="stylesheet">
<div class="Order">
<div class="Order-price">
<span class="color-lighter">Custom Tatoo Design - Small × 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>
使用表边框很无聊,我的建议是在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>
本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处
评论列表(56条)