表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>