html斜杠单元格,用斜杠拆分左侧单元格的html表

由于HTML基于box对象，因此无法使用标准元素实现此目的。

实现此目的的最简单方法是将单元格拆分为三列，并在中间列中使用背景图像，模拟表格单元格的边框宽度。

这种效果可以实现如下：

table {

border-spacing: 0;

}

table tr td {

border: 1px solid black;

}

table .cell-left {

border-right: 0;

}

table .cell-middle {

border-left: 0;

border-right: 0;

background-image: url(slash.png);

background-position: center center;

}

table .cell-right {

border-left: 0;

}

Cell A

Cell B

注意：

提供的类名仅作为示例目的，您可能希望将它们命名为“语义上合适的”

需要一个合适的图像，在我的测试中，我创建了一个简单的1像素对角线(你是free to use)，但是你当然可以像你想的那样有创意。在上面的示例中，背景图像设置为在单元格的绝对中心对齐，这意味着您可以根据需要创建大小的图像，以便相应地缩放。

UL>