chrome上的html表格边框渲染问题答案

【问题标题】：html table border rendering problem on chromechrome上的html表格边框渲染问题
【发布时间】：2020-04-18 22:41:05
【问题描述】：

html 表格边框在 chrome 上的渲染问题。我有这样的代码：

table {
  border-collapse: collapse;
}

#first td {
  width: 200px;
  height: 80px;
  border-style: dashed;
}

#second td {
  width: 200px;
  height: 80px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.2);
}

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

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

<body>
  <table id="first">
      <tr>
        <td rowspan="4">b</td>
        <td>c1</td>
      </tr>
      <tr>
        <td>c2</td>
      </tr>
      <tr>
        <td>c3</td>
      </tr>
  </table>
  <br/>
  <table id="second">
      <tr>
        <td rowspan="4">b</td>
        <td>c1</td>
      </tr>
      <tr>
        <td>c2</td>
      </tr>
      <tr>
        <td>c3</td>
      </tr>
  </table>
</body>

</html>

在第一张桌子上，c2 的左边框看起来像一条实线，而我设置为 td {border-style: dashed;}。我很困扰。

在第二张桌子上，为什么 c2,c3 的左边框比 Chrome 上的 c1 更暗？

以及如何修复它们？所有测试在 Firefox 中都能正常运行。

【问题讨论】：

不使用 rgba 颜色，而是使用纯色，例如 border-color: #ddd
Insted 使用 rgba --border-color: rgba(0, 0, 0, 0.2); ====== 使用#c1c1c1 代码。
感谢您的回答。我考虑的是渲染逻辑，如果我设置为 td {border-style: dashed;}，c2 的左边框，c3 看起来像一条实线......

标签： html css

【解决方案1】：

您可以使用纯色代替使用的 rgba 颜色

td {
  border-style: solid;
  border-color:#ddd;
}

tr {
  height: 80px;
}

col {
  width: 200px;
}

table {
  border-color: #ddd;
  /* border-collapse: collapse; */
  border-collapse: collapse;
}

<table cellpadding="0">
  <colgroup>
    <col />
    <col />
  </colgroup>
  <tbody>
    <tr>
      <td rowspan="4">b</td>
      <td>c1</td>
    </tr>
    <tr>
      <td>c2</td>
    </tr>
    <tr>
      <td>c3</td>
    </tr>
    <tr>
      <td>c4</td>
    </tr>
  </tbody>
</table>

【讨论】：

我考虑的是渲染逻辑，如果我设置为 td {border-style: dashed;}，c2 ,c3 的左边框看起来像一条实线...

【解决方案2】：

因为你给了边框颜色不透明度。

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        td {
            border-style: solid;
            border-color: #a3a3a3;
        }
        tr {
            height: 80px;
        }
        col {
            width: 200px;
        }
        table {
            border-color: #a3a3a3;
            border-collapse: collapse;
        }
    </style>
    </head>
    <body>
        <table cellpadding="0">
            <colgroup>
                <col />
                <col />
            </colgroup>
            <tbody>
                <tr>
                    <td rowspan="4">b</td>
                    <td>c1</td>
                </tr>
                <tr>
                    <td>c2</td>
                </tr>
                <tr>
                    <td>c3</td>
                </tr>
                <tr>
                    <td>c4</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

【讨论】：

谢谢，但我考虑的是渲染逻辑，如果我设置为td {border-style: dashed;}，c2,c3的左边框看起来像实线...

【解决方案3】：

Insted 使用rgba -- border-color: rgba(0, 0, 0, 0.2); ====== 使用#c1c1c1 代码。

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    td {
      border: dashed 1px #c1c1c1;
    }
    
    tr {
      height: 80px;
    }
    
    col {
      width: 200px;
    }
    
    table {
      border-collapse: collapse;
    }
  </style>
</head>

<body>
  <table cellpadding="0">
    <colgroup>
      <col />
      <col />
    </colgroup>
    <tbody>
      <tr>
        <td rowspan="4">b</td>
        <td>c1</td>
      </tr>
      <tr>
        <td>c2</td>
      </tr>
      <tr>
        <td>c3</td>
      </tr>
      <tr>
        <td>c4</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：

谢谢，但我考虑的是渲染逻辑，如果我设置为td {border-style: dashed;}，c2,c3的左边框看起来像实线...
emmmmm，当td的边框宽度为3px时，就可以看出问题了。