如何使用 CSS 实现这一点

Question

我根本不会称自己为程序员，但我确实知道一些基本的css。但是，我在创建看起来像此站点上的表时遇到问题：https://www.slotsia.com。

我希望实现的是将最左边的行编号与该角图形一起。我敢肯定这一切都是用 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; 
}

另外，较大的文本看起来不像普通字体？我认为这是字体真棒或谷歌字体或其他东西？怎么用呢？

谢谢

Answer 1

这是一个小提琴，演示如何在单元格中完成索引操作： https://jsfiddle.net/59wfkzgs/2/

.HTML

<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>

.CSS

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

您可以在表格的单元格中做几乎所有您想要的事情，因此您可以以任何您想要的方式对其进行时尚处理。不要害怕这样做:)。

希望对您有所帮助。

迪伦