删除 HTML table 内的一些边框

Question

我正在 HTML 中构建一个 table 并且我很惊讶，因为我有一个简单的问题：我想删除一些行的顶部边框。这是 codePen 示例：

http://codepen.io/Loreno/pen/PpNwPy?editors=1000

示例中的某些行具有 class hideTopBorder。这个 class 看起来像这样：

   .hideTopBorder {border-top: none;}

我希望边框会消失，但它们仍然存在。我也尝试将此 class 添加到行内的单元格中，但它仍然不起作用。看似简单的事情，结果对我来说还是挺难的。

Answer 1

要获得您想要的效果，您需要将其应用于 td 并同时移除底部边框。试试这个：

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 2px;
  overflow: hidden;
  word-break: normal;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 2px;
  overflow: hidden;
  word-break: normal;
}

.tg .tg-yw4l {
  vertical-align: top
}

.width-25 {
  width: 25%;
}

.hideTopBorder td {
  border-top: none;
  border-bottom: none;
}

<div id="report-div">
  <table class="tg">
    <tr>
      <th class="tg-yw4l" colspan="4">TEST DATA</th>
    </tr>
    <tr>
      <td class="tg-yw4l" colspan="4">DESCRIPTION</td>
    </tr>
    <tr>
      <td class="tg-yw4l" style="width: 50%;" colspan="2">Customer </td>
      <td class="tg-yw4l" style="width: 50%;" colspan="2">Analyze</td>
    </tr>
    <tr class="hideTopBorder">
      <td class="hideTopBorder tg-yw4l width-25">Name:</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
      <td class="tg-yw4l width-25 hideTopBorder">Owner:</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
    </tr>
    <tr class="hideTopBorder">
      <td class="tg-yw4l width-25 hideTopBorder">contact:</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
      <td class="tg-yw4l width-25 hideTopBorder">Type:</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
    </tr>
    <tr class="hideTopBorder">
      <td class="tg-yw4l width-25 hideTopBorder">Phone number:</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
      <td class="tg-yw4l width-25 hideTopBorder">Model</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
    </tr>
    <tr class="hideTopBorder">
      <td class="tg-yw4l width-25 hideTopBorder">Mail</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
      <td class="tg-yw4l width-25 hideTopBorder">Location</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
    </tr>
    <tr class="hideTopBorder">
      <td class="tg-yw4l width-25 hideTopBorder">Contact</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
      <td class="tg-yw4l width-25 hideTopBorder">number:</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
    </tr>
    <tr class="hideTopBorder">
      <td class="tg-yw4l width-25 hideTopBorder">Site</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
      <td class="tg-yw4l width-25 hideTopBorder">board:</td>
      <td class="tg-yw4l width-25 hideTopBorder"></td>
    </tr>
    <tr>
      <td class="tg-yw4l" colspan="4">SOMETHING</td>
    </tr>
  </table>
</div>

删除 HTML table 内的一些边框

Remove some borders inside HTML table

html

css

border