html 怎么取消dl 边框,html – 由于Chrome中的colspan,无法删除边框

这是一个

known Chrome issue,而且非常烦人.

April 1 2014

It’s a known (old) issue in our table code. Collapsing borders are determined based on adjacent cells and our code doesn’t deal correctly with spanning cells (we only consider the cell adjoining the first row / column in a row / column span). On top of that, our border granularity is determined by the cell’s span.

To fix this bug, we would need to overhaul our collapsing border code, which is a big undertaking.

(归功于Paolo Forgia的备用answer,这是第一个注意到Chromium线程的.)

分离边界是一种选择,但我知道我个人讨厌使用分离的细胞边界.你遇到的问题是,每个其他单元格只需要在一个站点上有一个边框,这就变得非常头疼,更不用说CSS标记的卷积了.

使您能够保持可折叠边框的解决方法类似于下面的方法.它在单元格中创建一个伪元素,用白色覆盖红色边框.

body {

background: white;

}

table {

border-collapse: collapse;

}

td {

border: 1px solid red;

}

td.nb {

border: 0 !important;

}

/* New class for cells affected by this issue */

td.nbtb {

position: relative;

border: 0 !important;

}

/* Pseudo-element to cover up the borders */

td.nbtb::after {

position: absolute;

top: 0px;

left: 0px;

display: block;

content: '';

width: 100%;

height: calc(100% + 1px);

border: 1px solid white;

box-sizing: border-box;

}

Foo
Hello	World	Bar
Foo