HTML/CSS网站价格表显示除笔记本电脑以外的设备上带有白线的彩色列

我想在我的网站上列出一个价格表。它只是一个简单的表，如下面的示例代码

在我的笔记本电脑上，一切看起来都不错，但当我在另一台设备上查看时，突然在金色的栏中出现了细细的白线

我不知道它们是怎么出现的，也不知道如何摆脱它们。有什么建议吗

HTML

---

请尝试

字体大小：0

否则，唯一可靠的方法是重叠最后一列的背景，或者创建一个跨越所有列行的背景

---

我有这个问题。。得出的结论是，如果你想在所有设备上都有像素级的完美图形元素，那就要找到奇怪的方法。。如果浏览器只绘制一个矩形而不是多个矩形，那么计算量就会减少。

我找到了一种适合我的代码的方法

我给了梅表一个折叠的边框，我给了彩色列一个5px的边框。这似乎奏效了

table{
border-collapse: collapse;
}

td{
border-bottom:5px solid gold
}

---

嗨，苏瑞，我运行了你的代码，但是代码坏了，你能删除这一行吗。laseronth tbl:不是（：first child）{margin bottom:2%；}然后再试一次吗？嗨，谢谢你的回复。我删除了你建议的代码行，但它仍然以与中间代码行相同的方式显示。如果可能的话，你可以将你的项目的git repo分享给我，我会帮你看一看。是的，我终于找到了一种方法，但这不是很好的代码答案。但它起作用了，所以现在还可以

.table-container{
  display: flex;
  flex-direction: row;
}

table {
  border-collapse: collapse;
}

.laseronth-tbl {
  width: 60%;
  margin-left: 5%;
}

.laseronth-tbl:not(:first-child) {
  margin-bottom: 2%;
}

.laseronth-tbl thead tr th:first-child {
  text-align: left;
}

.lasronth-th {
  color: #513f34;
}


.laseronth-tbl tbody tr td:not(:first-child) {
  text-align: center;
}

.laseronth-tbl tbody tr td:nth-child(even) {
  color: #caa463;
  width: 200px;

}

.laseronth-tbl tbody tr td,
.laseronth-tbl thead tr th {
  padding: 8px 0px;
}

.laseronth-tbl tbody tr td:first-child {
  width: 200px;
}

.laseronth-tbl tbody tr td:last-child {
  background-color: #d5b26c;
  margin-bottom: 0px;
  border-spacing: 0px;
  color: #fff;
  width: 250px;
  border:none;
}

.laseronth-tbl tbody tr td {
  color: #513f34;
  width: 74.4680851%;
}

table{
border-collapse: collapse;
}

td{
border-bottom:5px solid gold
}