Table CSS 造型 |边框

Question

我真的需要一些帮助CSS。

我正在尝试设置 table 的样式，但在添加边框时遇到了困难。

这是我想要的 table 风格（Photoshopped）：https://ibb.co/hFkCkDg

在 table 周围添加边框很简单：

.table-class {
    border: 1px solid #dddddd !important;
    padding: 20px !important;
    border-radius: 5px;
}

截图：https://ibb.co/Fs6qsNv

要在 table 中添加分隔线，我需要在 table 中的行中添加顶部或底部边框。行是 tr 个元素。默认情况下，table 的 tr 元素不接受边框。因此，为了克服这个问题，我将 {border-collapse: collapse !important;} 添加到整个 table，这允许我向行添加边框，但它弄乱了整个 table 周围的边框。截图：https://ibb.co/Vgfq9jp

由于 {border-collapse: collapse !important;}，属性 border、padding、border-radius 不适用于 table。

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

我怎样才能达到我想要的效果？

Answer 1

我会使用 flexbox，并将 flex: 1 或 flex-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">.00</s> <b>.00</b></span>
  </div>
  <div class="Order-price Order-price--sub">
    <span>Subtotal</span>
    <span>.00</span>
  </div>
  <div class="Order-price Order-price--tot">
    <span>Total</span>
    <span><small>USD</small> .00</span>
  </div>
</div>

Answer 2

使用 table 边框很无聊，我的建议是在 td/th 元素中使用边框。

我创建这个table没有样式，只是解决边框问题

   .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>.00</s></span>
        <span>.00</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Subtotal</td>
      <td>.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>USD .00</td>
    </tr>
  </tfoot>
</table>

Table CSS 造型 |边框

Table CSS styling | Borders

html

css

border