Question

出于某种原因，我尝试了<tbody>的样式，但是我提出的现有样式并不重要，它没有任何区别。

理论上，以下内容应该有效，但不是......

＆＃13;

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

＆＃13;

<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>

＆＃13;

最终目标（除非有更好的建议呈现）是将<tbody>包裹在两个<tr>左右的边界，以便它们在视觉上可识别为一起。顶部<tr>始终可见，但第二个（或更多）不可见（由于jQuery切换了附加信息。通常我会将其包装在<div>并将其称为一天，但我需要表格格式来自此动态表格的标题，因此所有内容都保留在适当的列中，并且不会漂移到永远的地方。

任何想法或建议都会很棒。： - ）

Answer 1

我认为tbody将边界定义为虚拟方式并提高人类可读性。然而，您可以使用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;
    }

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

1 个答案: