表CSS样式| 边框

debugcn 发表于 Dev

约克

我真的需要CSS的帮助。

我正在尝试为表格设置样式，但是在添加边框时遇到了困难。

这是我要使用的表格样式（Photoshopped）：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不为工作表中。

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

如何获得想要的外观？

罗科·C·布尔扬

我将使用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" 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。