如何使用CSS实现这一点？

我不会称自己为程序员，但我知道一些基本的css。但是，我在创建类似于此站点上的表时遇到问题：

我希望实现的是最左边的行编号和拐角图形。我确信这一切都是用css完成的，编号可能是自动的

我使用wordpress和插件tablepress创建表

我尝试在css中输入以下代码，实现了编号，即使它的开头是错误的0而不是1

.tablepress-id-4 { 
    counter-reset: rowNumber; 
} 
.tablepress-id-4 tr:not(:first-child) { 
    counter-increment: rowNumber; 
} 
.tablepress-id-4 tr td:first-child::before { 
    content: counter(rowNumber); 
    min-width: 1em; 
    margin-right: .5em; 
}

而且，较大的文本看起来不像普通字体？我在想是字体很棒还是谷歌字体之类的？如何使用它

---

谢谢

这里有一把小提琴演示如何在单元格中完成索引：

HTML 你几乎可以在一张桌子的格子里做任何你想做的事情，所以你可以用任何你想做的方式来装饰它。不要害怕这样做：）

希望能有帮助

---

Dylan也不是一个代码编写服务。请回顾并提供一个关于你在哪里遇到麻烦的具体问题，说明你的尝试。好的，对不起。我是新来的。我使用wordpress和插件tablepress创建表。我确实尝试在css中输入以下代码，以实现编号，即使它以0而不是1开头。tablepress-id-4{计数器重置：rowNumber；}。tablepress-id-4 tr:not（：first child）{计数器增量：rowNumber；}。tablepress-id-4 tr td:first child:：before{content:counter（rowNumber）；最小宽度：1em；右边距：.5em；}请使用编辑按钮，而不是试图通过注释发布重要信息。也就是说，如果你检查了你链接的页面的源代码，你会得到关于它是如何实现的答案。好吧，对不起，我放弃了。我显然不是一个优秀的程序员，不能在这里发帖。非常感谢。

<table>
    <tr>
        <td>
            <span class="index">1</span>
            ABC
        </td>
        <td>
            ABC
        </td>
    </tr>
    <tr>
        <td>
            <span class="index">2</span>
            ABC
        </td>
        <td>DEF</td>
    </tr>
    <tr>
        <td>
            <span class="index">3</span>
            ABC
        </td>
        <td>DEF</td>
    </tr>
</table>

table, tr, td {
    font-family:"Segoe UI";

    padding:20px;

    border:solid 1px black;
    border-collapse:collapse;
}

td {
    text-align:center;
    position:relative;
    min-width:150px;
}

.index {
    position:absolute;

    top:-2px;
    left:-2px;
    width:30px;
    height:30px;

    border:solid 1px black;
    border-radius:0 0 100px 0;

    background-color:rgba(0,0,0,.5);
}