Question

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

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

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

   .hideTopBorder {border-top: none;}

我希望边界消失，但它们仍然在那里。我也尝试将这个类添加到行内的单元格中，但它仍然不起作用。这似乎是一件很简单的事情，但结果对我来说很难。

Answer 1

要获得所需效果，您需要将其应用到td并删除底部边框。试试这个：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

删除HTML表格中的一些边框

1 个答案: