html - 隐藏表格特定行的边框，HTML CSS

Question

我正在尝试去掉此表中特定行的边框。我想要在 Men 和 Armada 品牌的行周围有一个边框，但不要有中间的 botder 线。出于某种原因，我无法使用 tr 类摆脱它。我犯了什么错误？

table,
tr,
td,
th {
  border: 1px solid;
  border-collapse: collapse;
}

.noBorder {
  border: 0;
}

<table>
  <tr class="noBorder">
    <th>Men</th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th>Brand</th>
    <th>Model</th>
    <th>Waist</th>
    <th>Lengths</th>
    <th>Quick Description </th>
  </tr>
  <tr class="noBorder">
    <th>Armada</th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td>Armada</td>
    <td>Tracer 88</td>
    <td>88</td>
    <td>162, 172</td>
    <td>Cut with an 88mm waist width and Armada s snow-shedding Tapertop topsheet to minimize added weight from snow buildup, the Armada Tracer 88 Skis travel swiftly and efficiently uphill while the EST All-Mtn Rocker provides versatile performance on the
      journey down.</td>
  </tr>

Answer 1

您正在将边框应用于 tr 和 th/td。因此，从 tr 中删除边框是不够的。您还需要将其从 th/td 中删除，以便您可以像这样调整您的 CSS:

table,
tr,
td,
th {
  border: 1px solid;
  border-collapse: collapse;
}

.noBorder {
  border: 0;
}

.noBorder th,
.noBorder td {
  border: 0;
}

<table>
  <tr class="noBorder">
    <th>Men</th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th>Brand</th>
    <th>Model</th>
    <th>Waist</th>
    <th>Lengths</th>
    <th>Quick Description </th>
  </tr>
  <tr class="noBorder">
    <th>Armada</th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td>Armada</td>
    <td>Tracer 88</td>
    <td>88</td>
    <td>162, 172</td>
    <td>Cut with an 88mm waist width and Armada s snow-shedding Tapertop topsheet to minimize added weight from snow buildup, the Armada Tracer 88 Skis travel swiftly and efficiently uphill while the EST All-Mtn Rocker provides versatile performance on the
      journey down.</td>
  </tr>

另一个解决方案是使用 colspan 来避免添加空单元格:

table,
tr,
td,
th {
  border: 1px solid;
  border-collapse: collapse;
}

.noBorder {
  border: 0;
}

<table>
  <tr class="noBorder">
    <th colspan=5>Men</th>
  </tr>
  <tr>
    <th>Brand</th>
    <th>Model</th>
    <th>Waist</th>
    <th>Lengths</th>
    <th>Quick Description </th>
  </tr>
  <tr class="noBorder">
    <th colspan=5>Armada</th>
  </tr>
  <tr>
    <td>Armada</td>
    <td>Tracer 88</td>
    <td>88</td>
    <td>162, 172</td>
    <td>Cut with an 88mm waist width and Armada s snow-shedding Tapertop topsheet to minimize added weight from snow buildup, the Armada Tracer 88 Skis travel swiftly and efficiently uphill while the EST All-Mtn Rocker provides versatile performance on the
      journey down.</td>
  </tr>