Question

我有一张表，当我使用border-collapse:collapse;时，它在来自下一行的行的边框中显示单个1px。我有什么想法可以解决这个问题吗？

我希望它看起来完全没有在单元格或任何东西之间没有任何填充。

这是在Firefox中的方式，我还没有尝试过其他浏览器。

1px in corner

HTML / CSS

.responsive-table {
  border-collapse: collapse;
  width: 100%;
}
.responsive-table td {
  border: 1px solid #ddd;
}
.responsive-table tbody tr:nth-of-type(2n) {
  background: #f7f7f7;
}
.responsive-table tbody tr:nth-of-type(2n+1),
.resp-content,
.resp-div {
  background: #eee;
}
.responsive-table thead th,
.basic-table thead th {
  background: #006bb2;
  color: #fff;
}
.responsive-table th {
  border: 1px solid #0087e0;
}

<table class="responsive-table">
  <thead>
    <tr>
      <th>H</th>
      <th>H</th>
      <th>H</th>
      <th>H</th>
      <th>H</th>
      <th>H</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

Answer 1

只需增加表格标题的下边框宽度：

.responsive-table th {
    border: 1px solid #0087e0;
    border-bottom-width: 2px;
}

＆＃13;

.responsive-table {
  border-collapse: collapse;
  width: 100%;
}
.responsive-table td {
  border: 1px solid #ddd;
}
.responsive-table tbody tr:nth-of-type(2n) {
  background: #f7f7f7;
}
.responsive-table tbody tr:nth-of-type(2n+1),
.resp-content,
.resp-div {
  background: #eee;
}
.responsive-table thead th,
.basic-table thead th {
  background: #006bb2;
  color: #fff;
}
.responsive-table th {
  border: 1px solid #0087e0;
  border-bottom-width: 2px;
}

＆＃13;

<table class="responsive-table">
  <thead>
    <tr>
      <th>H</th>
      <th>H</th>
      <th>H</th>
      <th>H</th>
      <th>H</th>
      <th>H</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

＆＃13;

Screenshot 1

或者，如{名}所示，border-bottom-style: double;将指定双边框：

.responsive-table th {
    border: 1px solid #0087e0;
    border-bottom-style: double;
}

＆＃13;

.responsive-table {
  border-collapse: collapse;
  width: 100%;
}
.responsive-table td {
  border: 1px solid #ddd;
}
.responsive-table tbody tr:nth-of-type(2n) {
  background: #f7f7f7;
}
.responsive-table tbody tr:nth-of-type(2n+1),
.resp-content,
.resp-div {
  background: #eee;
}
.responsive-table thead th,
.basic-table thead th {
  background: #006bb2;
  color: #fff;
}
.responsive-table th {
  border: 1px solid #0087e0;
  border-bottom-style: double;
}

＆＃13;

<table class="responsive-table">
  <thead>
    <tr>
      <th>H</th>
      <th>H</th>
      <th>H</th>
      <th>H</th>
      <th>H</th>
      <th>H</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

＆＃13;

Screenshot

更多信息：Border conflict resolution

Answer 2

使用伪元素来掩盖它：

.responsive-table thead th:after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    border-left: 1px solid #0087e0;
}

只需将边框的颜色更改为任何匹配项。您还可以使用:before来掩盖最左侧的瑕疵。

表格边框在每个TD的角落添加1px

2 个答案: