Html 跨行表周围的边框

您好，我已经使用

td

和

行span

创建了表。现在我想通过加粗主要类别使结构更加清晰

我怎样才能做到这一点？ 我担心我必须一个接一个地手动给每个细胞板上色？似乎boarder和coloring属性与td或tr元素有关。因此，是否有可能跨列跨越这种效果？

尝试以下方法：

<tbody>
  <tr class="colored">
    <td rowspan="6">A</td>
    <td rowspan="3">B</td>
    <td>C</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>D</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>E</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr class="colored">
    <td rowspan="3">B</td>
    <td>F</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>G</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>H</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
</tbody>
<tbody>
  <tr class="colored">
    <td rowspan="6">A</td>
    <td rowspan="4">B</td>
    <td>C</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>D</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>E</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>F</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr class="colored">
    <td rowspan="2">B</td>
    <td>G</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>H</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
</tbody>

试试这个：

<tbody>
  <tr class="colored">
    <td rowspan="6">A</td>
    <td rowspan="3">B</td>
    <td>C</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>D</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>E</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr class="colored">
    <td rowspan="3">B</td>
    <td>F</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>G</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>H</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
</tbody>
<tbody>
  <tr class="colored">
    <td rowspan="6">A</td>
    <td rowspan="4">B</td>
    <td>C</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>D</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>E</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>F</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr class="colored">
    <td rowspan="2">B</td>
    <td>G</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>H</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
</tbody>

---

我的意思是，这不是一个干净的解决方案，但我认为它解决了您的问题。我会尝试使用更多的css类来设计边框谢谢！指定2,3,4行跨度时。那是蛮力吗？我将有一个动态数据（较长的表等），但结构没有改变，它会工作吗？是的，它是！但是如果结构保持不变，那么所有行跨度为2、3和4的单元格都会有一个边框，所以这不会是一个问题。我明白了！是否有可能使其一般化，而不是只坚持2,3,4。有时我的行跨度会达到20+哈哈。我的桌子是dynamicok请尝试以下内容：。这将选择除每行中的第一个单元格之外的所有具有rowspan属性的td。我希望这个帮助不是一个干净的解决方案，但我认为它解决了你的问题。我会尝试使用更多的css类来设计边框谢谢！指定2,3,4行跨度时。那是蛮力吗？我将有一个动态数据（较长的表等），但结构没有改变，它会工作吗？是的，它是！但是如果结构保持不变，那么所有行跨度为2、3和4的单元格都会有一个边框，所以这不会是一个问题。我明白了！是否有可能使其一般化，而不是只坚持2,3,4。有时我的行跨度会达到20+哈哈。我的桌子是dynamicok请尝试以下内容：。这将选择除每行中的第一个单元格之外的所有具有rowspan属性的td。我希望这有帮助