[英]Table CSS styling | Borders
I really need some help with CSS.我真的需要 CSS 的帮助。
I'm trying to style a table and I'm having difficulties adding borders.我正在尝试为表格设置样式,但在添加边框时遇到了困难。
Here's the table style I'm going for (Photoshopped): https://ibb.co/hFkCkDg这是我要使用的表格样式(经过Photoshop处理): https://ibb.co/hFkCkDg
Adding a border around the table is simple:在表格周围添加边框很简单:
.table-class {
border: 1px solid #dddddd !important;
padding: 20px !important;
border-radius: 5px;
}
Screenshot: https://ibb.co/Fs6qsNv截图: https://ibb.co/Fs6qsNv
To add the separating lines inside the table I need to add a top or bottom border to the rows in the table.要在表格中添加分隔线,我需要为表格中的行添加顶部或底部边框。 Rows are
tr
elements.行是
tr
元素。 By default a tr
element of a table does not accept borders.默认情况下,表格的
tr
元素不接受边框。 So in order to overcome this I added {border-collapse: collapse;important;}
to the whole table which allowed me to add borders to rows, but it messed up the border around the whole table.因此,为了克服这个问题,我在整个表格中添加了
{border-collapse: collapse;important;}
,这允许我为行添加边框,但它弄乱了整个表格的边框。 Screenshot: https://ibb.co/Vgfq9jp截图: https://ibb.co/Vgfq9jp
Because of {border-collapse: collapse;important;}
, the properties border
, padding
, border-radius
don't work for the table.由于
{border-collapse: collapse;important;}
,属性border
, padding
, border-radius
不适用于表格。
Which means I can either add a border around the whole table or add the separating lines, but not both.这意味着我可以在整个表格周围添加边框或添加分隔线,但不能同时添加。
How can I achieve the look I'm going for?我怎样才能达到我想要的外观?
I'd go using flexbox, and setting flex: 1
or flex-grow: 1
to the first child of each "row" :我会使用 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 × 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>
working with table border is boring, my suggestion is to use the border in td/th
elements.使用表格边框很无聊,我的建议是在
td/th
元素中使用边框。
I created this table without style, only solving the problem of borders我创建了这个没有样式的表格,只解决了边框的问题
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.