为什么我的HTML表格上没有正确的CSS边框颜色？

这是我的桌子的样子。注意灰色行上方较暗的边界线：为什么我的HTML表格上没有正确的CSS边框颜色？

enter image description here

这是我希望它看起来像：

enter image description here

这里是我的代码。不是最漂亮的，但大部分都适用。当谈到我在做什么错误的边界？：

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

来源

2014-12-03 Ethan Allen

如果你不想边框你为什么要定义它们？ – JJJ 2014-12-03 20:48:12

我希望整个表格和中间的一条边框都有边框（请参见图片应该是什么样子）。有没有更简单的方法来做到这一点？ – 2014-12-03 20:49:02

关键是你的CSS规则定义了表格单元格周围的边界。如果你只想要左右边框，那么不要定义顶部和底部边框（'border-width：0 1px;'） – JJJ 2014-12-03 20:50:22

添加和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>

来源

2014-12-03 22:34:55 Karmacoma

为什么我的HTML表格上没有正确的CSS边框颜色？

回答

相关问题