HTML

Question

我根本不会称自己为程序员，但我知道一些基本的CSS。但是，我在创建一个类似于此网站的表格时遇到问题：https://www.slotsia.com。

我希望实现的是与最左边的行图一起编号。我确信这些都是用css完成的，编号可能是自动的。

我使用wordpress和插件tablepress来创建表格。

我确实尝试将以下代码放在实现编号的css中，即使它以0而不是1开始出错。

TOP

此外，较大的文字看起来不像普通字体？我认为这是字体真棒或谷歌字体或什么？怎么用？

谢谢

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

您可以在桌子的单元格中完成所需的一切 - 所以您可以以任何您想要的方式设计它。不要害怕这样做:)。

希望它有所帮助。

迪伦

如何用CSS实现这一目标？

1 个答案:

HTML

CSS