表CSS造型| 边框

Question

我真的需要 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不适用于表格。

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

我怎样才能达到我想要的外观？

Answer 1

我会使用 flexbox go，并将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" 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>