gpt4 book ai didi

html - 表格 CSS 样式 |边框

转载 作者:行者123 更新时间:2023-12-04 08:05:02 25 4
gpt4 key购买 nike

我真的需要一些 CSS 方面的帮助。
我正在尝试为表格设置样式,但在添加边框时遇到了困难。
这是我要使用的表格样式(Photoshop):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不要为 table 工作。
这意味着我可以在整个表格周围添加边框或添加分隔线,但不能同时添加。
我怎样才能达到我想要的样子?

最佳答案

我会去使用 flexbox,并设置 flex: 1flex-grow: 1第一个 child 每个“行”:

* {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>

关于html - 表格 CSS 样式 |边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66252088/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com