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

【问题标题】：Why aren't my CSS border colors correct on my HTML table?为什么我的 HTML 表格上的 CSS 边框颜色不正确？
【发布时间】：2014-12-04 06:34:55
【问题描述】：

这是我的桌子的样子。注意灰色行上方较暗的边框线：

这是我想要的样子：

这是我的代码。不是最漂亮的，但它在大多数情况下都有效。当涉及到边界时，我做错了什么？：

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

【问题讨论】：

如果您不想要边框，为什么要定义它们？
我想要整个表格的边框和中间的一条线（参见图片应该是什么样子）。有没有更简单的方法来做到这一点？
关键是您的 CSS 规则定义了表格单元格周围的边框。如果您只想要左右边框，则不要定义顶部和底部边框 (border-width: 0 1px;)
哦，我明白了。我不知道你可以像这样在水平和垂直之间定义它们。谢谢。
是的，@EthanAllen，这就是它的工作方式。阅读：w3schools.com/cssref/pr_border-width.asp

标签： html css

【解决方案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>

【讨论】：