首页 > 解决方案 > 表格中不需要的边框

问题描述

我有一个无边框表格,我希望交替行具有背景颜色。我在 tr 元素上设置了 CSS 背景颜色,它为行中的所有单元格提供了我想要的颜色,但每个单元格之间都有一条细白线。我怎样才能摆脱这个?

以下是该现象的非常简单的演示。注意第 2 行单元格之间不需要的细白线。添加边框、边框间距或边框折叠属性似乎没有任何区别。我在 Firefox 和 Chrome 上试过这个,两者的行为都是一样的。

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>

<body>
  <style>
    td {
      padding: 5px;
    }
  </style>
  <table style="width:100%">
    <colgroup>
      <col style="width:135px">
      <col style="width:135px">
      <col>
    </colgroup>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr style="background-color:#87CEEB">
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

标签: csshtml-table

解决方案


您可以将此代码添加到您的css文件中吗?

table, th, td {
    border: 0;
}

推荐阅读