将两个组合<TR>在一起以样式化为 TBODY 而不是样式

Question

出于某种原因，我尝试过设置<tbody>样式，但是无论我提取多少现有样式，

它都没有任何区别。

从理论上讲，以下内容应该有效，但不能...

tbody {
  border: 1px solid #2696A1;
  width: 100%;
  border-spacing: 0px;
  margin-top: 2px;
  margin-bottom: 2px;
  page-break-inside: avoid;
  border-collapse: collapse;
}

<table>
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
  </tbody>
</table>

最终目标（除非出现更好的建议）是用边框包裹<tbody>两个<tr>以便它们在视觉上可以识别在一起。顶部<tr>始终可见，但第二个（或更多）不可见（由于 jQuery 切换了附加信息）。通常我会把它包装在一个<div>中并称之为一天，但我需要这个动态表的标题中的表格格式，以便所有内容都保留在适当的列中，不会漂流到梦幻岛。

任何想法或建议都很棒。

Answer 1

我认为将边界定义为虚拟方式并增加人类可读性。但是，您可以使用td棘手的方式来实现目标，而不是样式tbody。甚至 tr 也不是应用样式的好地方。您应该定位td，th等。请尝试以下方式应用边框：

    table {
      width: 100%;
      border-spacing: 0px;
      margin-top: 2px;
      margin-bottom: 2px;
      page-break-inside: avoid;
      border-collapse: collapse;
    }
    tbody > tr:first-child > td {
        border-top: 1px solid #2696A1;
    }
    tbody > tr > td:first-child {
        border-left: 1px solid #2696A1;
    }
    tbody > tr > td:last-child {
        border-right: 1px solid #2696A1;
    }
    tbody > tr:last-child > td {
        border-bottom: 1px solid #2696A1;
    }