-2

我根本不称自己为程序员，但我知道一些基本的CSS。但是，在创建类似于此网站的表格时遇到问题：https://www.slotsia.com。如何用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; 
}

此外，较大的文本看起来并不像普通字体？我在想这是字体真棒或谷歌字体什么的？如何使用它？

谢谢

来源

2017-06-22 danniee

SO不是代码写入服务。请回顾[问]并提供您尝试过的关于您遇到麻烦的地方的特定问题的[mcve]。 [目前似乎没有投入足够的研究工作]（https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow -Users）。 – zzzzBov

好的，对不起。我对此很陌生。我使用wordpress和插件tablepress来创建表。我确实尝试将下面的代码放在实现了编号的css中，即使它以0而不是1开头。 .tablepress-id-4 { \t counter-reset：rowNumber; } .tablepress-id-4 tr：not（：first-child）{ \t counter-increment：rowNumber; } .tablepress-id-4 tr td：first-child :: before { \t content：counter（rowNumber）; \t min-width：1em; \t margin-right：.5em; } – danniee

请使用编辑按钮，而不是尝试通过评论发布重要信息。也就是说，如果你检查了你链接的页面的来源，你会得到你如何实现的答案。 – zzzzBov

这里有一个小提琴演示完成的单元，其索引的事情：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); 
}

你能够做的事情 - 几乎所有你想要的东西在一个桌子的单元格中，所以你可以时尚的我以任何你想要的方式。不要害怕这样做:)。

希望它有帮助。

Dylan

来源

2017-06-22 20:07:50

如何用CSS实现这一点？

回答

HTML

CSS

相关问题