添加表格，tr和单元格不同的特定边框样式和间距

Question

我想知道使用html和/或CSS，是否可以只折叠表格轮廓的tr，而表格轮廓和trs以及tds和ths具有不同的边框样式。

我知道这很复杂，因此，如果可以更清楚地看一下，这是我要实现的目标的一个图形：

Answer 1

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

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

• 像往常一样将外部表样式应用于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>

Answer 2

找到了一种方法，只需在两个tr之间添加一个小时和一个微小的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>