应用显示时表格布局不正确：阻止到表格单元格td

Question

我想在突出显示的表格单元格的角落添加一个三角形（使用CSS边框和：之前）。如果我使用默认的display：table-cell，它将无法正确添加到单元格的角落，而是添加到表格的一角。所以我对那个表格单元格使用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 class =“cell-highlighted-triangle”

然而，这是结果，显示突出显示的柱状细胞2,3,4都被夹在第2列。

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

非常感谢你帮助我！任何建议表示赞赏！

Answer 1

尝试显示：inline-block;应该像内联和阻止之间的混合！

Answer 2

您必须在样式中添加属性：content：“”;

.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;
}