-2

Je ne me qualifierais pas du tout de programmeur, mais je connais quelques notions de base. Cependant, j'ai du mal à créer une table qui ressemble à quelque chose sur ce site: https://www.slotsia.com.Comment y parvenir avec CSS?

Ce que je souhaite réaliser est la numérotation des lignes à l'extrême gauche avec ce graphique de coin. Je suis sûr que tout est fait avec css et la numérotation est probablement automatique. J'utilise wordpress et la table de plugin pour créer des tables.

J'ai essayé de mettre le code suivant dans le css qui a réalisé la numérotation, même si elle commence mal à 0 au lieu de 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; 
}

En outre, le texte plus ne ressemble pas à des polices normales ? Je pense que c'est police génial ou google fonts ou quelque chose? Comment utiliser ça?

Merci

Source

2017-06-22 danniee

SO n'est pas un service d'écriture de code. S'il vous plaît examiner [demander] et fournir un [mcve] de ce que vous avez essayé avec une * spécifique * question sur l'endroit où vous avez eu des problèmes. [Actuellement, il ne semble pas que vous ayez investi suffisamment d'efforts de recherche] (https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow -utilisateurs). – zzzzBov

Ok, désolé. Je suis nouveau à ça. J'utilise wordpress et la table de plugin pour créer des tables. J'ai essayé de mettre le code suivant dans le css qui a réalisé la numérotation, même si elle commence mal avec 0 au lieu de 1. .tablepress-id-4 { \t counter-reset: rowNumber; } .tablepress-id-4 tr: non (: premier enfant) { \t contre-incrément: rowNumber; } .tablepress-id-4 tr td: premier-enfant :: avant { \t contenu: counter (rowNumber); \t min-largeur: 1em; \t marge droite: .5em; } – danniee

Veuillez utiliser le bouton d'édition plutôt que d'essayer de publier des informations importantes via des commentaires. Cela dit, si vous avez inspecté la source de la page que vous avez liée, vous aurez votre réponse sur la façon dont elle a été implémentée. – zzzzBov

est ici un violon démonstration pour accomplir cette chose d'index dans la cellule: 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); 
}

Vous êtes en mesure de le faire - presque tout ce que vous voulez dans les cellules d'une table, de sorte que vous pouvez élégant je t de quelque façon que vous voulez. N'ayez pas peur de le faire :).

Espérons que ça aide.

Dylan

Source

2017-06-22 20:07:50

Comment y parvenir avec CSS?

Répondre

HTML

CSS

Questions connexes