不需要的表格单元格边框

Question

＆＃13;

＆＃13;

table {
  border: solid 1px #eee;
  text-align: right;
}
tr,
td,
th {
  padding: 0;
  margin: 0;
  border: none;
}
th,
td {
  width: 90px;
  height: 24px;
  line-height: 24px;
  padding: 0;
}
th {
  background-color: #f4f4f4;
}
.first-col {
  text-align: left;
}

＆＃13;

<table class="satisfaction">
  <tr>
    <th class="first-col">Kepuasan</th>
    <th>1 bulan</th>
    <th>6 bulan</th>
    <th>12 bulan</th>
  </tr>
  <tr>
    <td class="first-col"><span><img class="svg emo emo-smile" src="img/icon/emoticon-happy.svg">Positif</span>
    </td>
    <td>9393</td>
    <td>9393</td>
    <td>9393</td>
  </tr>
  <tr>
    <td class="first-col"><span><img class="svg emo emo-neutral" src="img/icon/emoticon-neutral.svg">Netral</span>
    </td>
    <td>93</td>
    <td>93</td>
    <td>93</td>
  </tr>
  <tr class="last-row">
    <td class="first-col"><span><img class="svg emo emo-frown" src="img/icon/emoticon-sad.svg">Negatif</span>
    </td>
    <td>39</td>
    <td>39</td>
    <td>39</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

我做了一张桌子，我在第一排看到这个白色的分隔符。

我已经完成了将所有边距和填充设置为零，但它不起作用。到目前为止，这是我的造型

table {
    border: solid 1px #eee;
    text-align: right;
}

tr, td, th {
    padding: 0;
    margin: 0;
    border: none;
}

th, td {
    width: 90px;
    height: 24px;
    line-height: 24px;
    padding: 0;
}

th {
    background-color: #f4f4f4;
}

.first-col {
    text-align: left;
}

我有什么遗漏的吗？任何帮助赞赏！

Answer 1

查看您发布的CSS似乎很可能出现“边框”，因为您没有折叠单元格边框;因此，我建议您添加规则：

border-collapse: collapse;

表元素的CSS规则：

table {
    border-collapse: collapse;
    border: solid 1px #eee;
    text-align: right;
}

table {
  border-collapse: collapse;
  border: solid 1px #eee;
  text-align: right;
}
tr,
td,
th {
  padding: 0;
  margin: 0;
  border: none;
}
th,
td {
  width: 90px;
  height: 24px;
  line-height: 24px;
  padding: 0;
}
th {
  background-color: #f4f4f4;
}
.first-col {
  text-align: left;
}

<table class="satisfaction">
  <tr>
    <th class="first-col">Kepuasan</th>
    <th>1 bulan</th>
    <th>6 bulan</th>
    <th>12 bulan</th>
  </tr>
  <tr>
    <td class="first-col"><span><img class="svg emo emo-smile" src="img/icon/emoticon-happy.svg">Positif</span>
    </td>
    <td>9393</td>
    <td>9393</td>
    <td>9393</td>
  </tr>
  <tr>
    <td class="first-col"><span><img class="svg emo emo-neutral" src="img/icon/emoticon-neutral.svg">Netral</span>
    </td>
    <td>93</td>
    <td>93</td>
    <td>93</td>
  </tr>
  <tr class="last-row">
    <td class="first-col"><span><img class="svg emo emo-frown" src="img/icon/emoticon-sad.svg">Negatif</span>
    </td>
    <td>39</td>
    <td>39</td>
    <td>39</td>
  </tr>
</table>

参考文献：

• border-collapse。