为 table、tr 和单元格添加不同的特定边框样式和间距

Question

我想知道是否可以使用 html and/or CSS 仅折叠 tr 与他 table 的轮廓，同时具有不同的边框样式对于 table 的大纲和 trs，以及 tds 和 ths。

我知道这很复杂，所以如果这能让它更清楚，下面是我想要实现的目标的图：

Answer 1

找到了一种方法，只需在两个 tr 之间添加一个 hr 和一个很小的 tr。

 hr {
  border: 4px outset rgb(207, 172, 179);
  width: 443px;
  position: absolute;
  top: 388px;
  left: 35px;
 }
 
 tr#mini {
   border: none;
   padding: 0px;
   margin: 0px;margin-top: 0px;
   margin-bottom: 0px;
   height: 8px;
 }

HTML:

<table id="tableau" class="nomaltext">
  <tr>
    <th>
      25g
    </th>
    <th>
      50g
    </th>
    <th>
      75g
    </th>
    <th>
      100g
    </th>
    <th>
      Personnalisé (min. 120g)
    </th>
  </tr>
  <tr id="mini">
    <hr>
  </tr>
  <tr>
    <td>
      5,99$
    </td>
    <td>
      8,99$
    </td>
    <td>
      13,80$
    </td>
    <td>
      7,40$
    </td>
    <td>
      11¢/gramme
    </td>
  </tr>
</table>

Answer 2

不，border-collapse 仅适用于整个 table，它不是 tr 或 td 元素的有效属性，因此您不能将它应用于那些以获得不同的间距。

但是您可以通过将单元格内容添加到 div 并将其用于某些样式来“伪造”它：

正常将外部 table 样式应用于 table
将行样式应用于 th / td 单元格的顶部和底部边框
将“单元格”样式应用于 th 和 td 中的 div。

工作示例：

table {
  border: 6px solid lightgray;
  border-right-color: gray;
  border-bottom-color: gray;
  border-collapse: collapse;
}

td {
  border-top: 5px solid gray;
}
tr:not(:last-child) td{
  border-bottom: 5px solid gray;
}

th .cell,
td .cell {
  margin: 5px;
  padding: 5px;
  border: 2px ridge lightblue;
}

<table>
  <tr>
    <th><div class="cell">First Name</div></th>
    <th><div class="cell">Last Name</div></th>
  </tr>
  <tr>
    <td><div class="cell">John</div></td>
    <td><div class="cell">Smith</div></td>
  </tr>
  <tr>
    <td><div class="cell">Jane</div></td>
    <td><div class="cell">Doe</div></td>
  </tr>
</table>

为 table、tr 和单元格添加不同的特定边框样式和间距

Add specific border styling and spacing that differs for the table, tr and cells

html

css

css-tables