html - 为什么我的 HTML 表格上的 CSS 边框颜色不正确？

Question

这是我的 table 的样子。请注意灰色行上方较暗的边框线:

这是我想要的样子:

这是我的代码。不是最漂亮的，但它在大多数情况下都有效。关于边界，我做错了什么？:

        .tx {
          border-collapse: collapse;
          border-spacing: 0;
          border-color: #dddddd;
        }
        .tx td {
          font-family: Arial, sans-serif;
          font-size: 12px;
          font-weight: bold;
          padding: 10px 10px;
          border-style: solid;
          border-width: 1px;
          overflow: hidden;
          word-break: normal;
          border-color: #dddddd;
          color: #000;
        }
        .tx .tx-vn4c {
          background-color: #f9f9f9;
          border-color: #f9f9f9 #dddddd;
        }

<table class="tx">
  <tr>
    <td class="tx-031e" style="width: 120px;">1</th>
      <td class="tx-031e" style="width: 300px;">Swimming</th>
  </tr>
  <tr>
    <td class="tx-vn4c">2</td>
    <td class="tx-vn4c">Running</td>
  </tr>
  <tr>
    <td class="tx-031e">3</td>
    <td class="tx-031e">Shooting</td>
  </tr>
  <tr>
    <td class="tx-vn4c">4</td>
    <td class="tx-vn4c">Diving</td>
  </tr>
  <tr>
    <td class="tx-031e">5</td>
    <td class="tx-031e">Bahhh</td>
  </tr>
</table>

Answer 1

添加border-bottom: none;和 border-top: none;至 .tx td类并将解决问题。

        .tx {
          border-collapse: collapse;
          border-spacing: 0;
          border-color: #dddddd;
        }
        .tx td {
          font-family: Arial, sans-serif;
          font-size: 12px;
          font-weight: bold;
          padding: 10px 10px;
          border-style: solid;
          border-width: 1px;
          overflow: hidden;
          word-break: normal;
          border-color: #dddddd;
          color: #000;
          border-bottom:none;
          border-top:none;
        }
        .tx .tx-vn4c {
          background-color: #f9f9f9;
          border-color: #f9f9f9 #dddddd;
        }

<table class="tx">
  <tr>
    <td class="tx-031e" style="width: 120px;">1</th>
      <td class="tx-031e" style="width: 300px;">Swimming</th>
  </tr>
  <tr>
    <td class="tx-vn4c">2</td>
    <td class="tx-vn4c">Running</td>
  </tr>
  <tr>
    <td class="tx-031e">3</td>
    <td class="tx-031e">Shooting</td>
  </tr>
  <tr>
    <td class="tx-vn4c">4</td>
    <td class="tx-vn4c">Diving</td>
  </tr>
  <tr>
    <td class="tx-031e">5</td>
    <td class="tx-031e">Bahhh</td>
  </tr>
</table>