CSSでこれを実現する方法は？

Question

私は自分自身をプログラマーと呼んでいませんが、基本的なCSSをいくつか知っています。しかし、このサイトのような表を作成するのに問題があります：https://www.slotsia.com。

私が達成したいのは、そのコーナーグラフィックと一緒に一番左に行番号を付けることです。私はそれがすべてCSSで行われていると確信して、番号はおそらく自動的です。

私はwordpressとplugin tablepressを使ってテーブルを作成しています。

私はそれはまた、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; 
} 

と間違って起動した場合でも、大きなテキストは、通常のフォントのようには見えませんが、ナンバリングを達成し、CSSに以下のコードを入れてみてくださいでした？私はそれが素晴らしいフォントやGoogleのフォントや何かだと思っている？それを使用する方法？

はありがとう

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

- あなたがテーブルのセルに入れたいと思っているほとんど全てを、スタイリッシュにすることができますあなたがしたいと思う方法で。そうすることを恐れないでください:)。

希望します。

ディラン