Question

我尝试使用border-collapse: collapse删除表格的边框。它工作得很好，应该如此，但是当我开始做transform: scale()使它变小时，边界会再次神奇地出现。

table {
    border-collapse: collapse;

    -moz-transform: scale(0.6);
    -moz-transform-origin: top left;
    -o-transform: scale(0.6);
    -o-transform-origin: top left;
    -webkit-transform: scale(0.6);
    -webkit-transform-origin: top left;
    transform: scale(0.6);
    transform-origin: top left;
}

有没有办法迫使边界崩溃无论如何？我认为重叠它们（负边距）是一种方式，但听起来很脏。

Answer 1

当浏览器缩放表格时，它不会对td元素的宽度进行精确计算。因此，相邻td元素之间存在一些差距，父元素的背景通过此间隙可见，看起来td元素具有边界（但实际上它的差距，如果您将应用一些{{1在父母你会看到它。）

您可以通过执行以下更改来解决此问题：

移除background-color background并将其应用于tbody tr:nth-child(odd)。
在table内的偶数行和2px内添加3px或border-right background，其颜色与td相同。

工作片段如下：

thead

table {
  border-collapse: collapse;
  transform: scale(0.6);
  transform-origin: top left;
  background: #7892a1;
  width: 70%;
}

thead {
  height: 50px;
  line-height: 50px;
}

tbody tr {
  height: 50px;
  line-height: 50px;
}

thead {
  background: #d2dbe0;
}

thead th {
  border-right: 2px solid #d2dbe0;
}

tbody tr:nth-child(even) {
  background: #a5b7c0;
}

tbody tr:nth-child(even) td {
  border-right: 2px solid #a5b7c0;
}

border-collapse：缩放时折叠不正常

1 个答案: