-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

相關問題