应用显示时表格布局不正确:块到表格单元格 td

Question

我想在突出显示的表格单元格的角落添加一个三角形（使用 CSS 边框和 ：before）。如果我使用默认的显示：表格单元格，它不会正确地添加到单元格的角落，而是添加到表格的角落。所以我使用 display：block 作为该表格单元格。

代码如下：

.cell-highlighted-triangle {
    display: block;
    position: relative;
}
.cell-highlighted-triangle:after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    border-width: 0 20px 20px 0;
    border-bottom-color: transparent;
    border-right-color: #510FAD;
    border-style: solid;
}

为了突出显示表格单元格，我使用它： TD 类="单元格突出显示的三角形"

但是，这是结果，它表明突出显示的列单元格 2、3、4 都夹在列 2 中。

https://lh5.googleusercontent.com/-wUJrlaeugAI/T7UEbCdbA2I/AAAAAAAAAJM/_iu9ZxHrwGc/s519/pic.png

非常感谢你帮助我！任何建议不胜感激！

Answer 1

尝试显示：内联块; 应该像内联和块之间的混合

Answer 2

你必须

在样式中添加属性：内容：";

.cell-highlighted-triangle:after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    border-width: 0 20px 20px 0;
    border-bottom-color: transparent;
    border-right-color: #510FAD;
    border-style: solid;
}