Je crée un tableau de classement pour un jeu en HTML. J'ai décidé d'utiliser les valeurs Quel autre CSS aurais-je besoin d'ajouter pour que les cellules aient une bordure tout autour des cellules, ou de faire une sorte de ligne verticale pour différencier les deux en-têtes. Quelque chose de ce genre, où le nom des joueurs passe sous l'en-tête du nom et le temps nécessaire pour terminer le jeu passe sous l'en-tête du temps. z-index: afin de placer des éléments au-dessus d'un canevas HTML. Pour le classement, j'ai décidé d'utiliser le , car cela facilitera la fonctionnalité du tableau de classement plus tard. Cependant, j'essaie de rendre la table agréable, et j'ai donc des problèmes avec le CSS. J'ai décidé d'implémenter le CSS dans le HTML plutôt que dans un fichier CSS séparé, car à ce stade, je vérifie simplement si cela fonctionne. Ce que j'essaie de faire, c'est d'avoir une bordure tout autour des cellules ou une ligne verticale qui différencie les deux en-têtes. Voici mon code:
<table id = Name&Time
style=
"z-index: 2;
position: absolute;
font-family: Georgia, Times, Times New Roman, serif;
width: 332px;
height: 24px;
top: 200px;
left: 460px;
padding-left: 5px;
font-size: 20px;
border: 1px solid #ffffff;
background-color:#1567ed;
color: #ffffff;
text-align: center;
border-collapse: collapse;">
<tr>
<th>Name</th>
<th>Time</th>
</tr>
<tr>
<td>Stuff</td>
<td>1:00</td>
</tr>
</table>
3 Réponses :
J'ai fait un exemple minimal en utilisant un tableau et deux colonnes, vous devriez l'adapter à votre cas.
<table> <tr><th colspan="2"><div>Title</div></th></tr> <tr><td><div>cell</div></td><td><div>cell</div></td></tr> </table>
table {padding:0; margin:0; border-collapse: collapse;}
td div, th div{
border:solid black 1px;
border-radius:6px;
margin: 0 10px
}
tr td:first-child {border-right: black solid 1px}
ok, je comprends ce que fait border-radius , mais que signifient -moz-border-radius et first-child ?
-moz-border-radius est spécifique à mozilla (je vais le supprimer maintenant) : first-child est le pseudo-élément auquel appliquer la règle css uniquement à le premier td
Je pense que vous devriez identifier les deux colonnes avec des identifiants différents, puis vous définissez la bordure gauche de la colonne qui se trouve à droite sur n'importe quelle valeur que vous voulez, mais n'oubliez pas de définir la largeur de la bordure droite à 0px pour la colonne qui se trouve sur le côté gauche, car si vous ne le faites pas, elle sera dupliquée si c'est la même valeur, et sinon, elle sera ajoutée.
Je souhaite que cela vous aide.
Si vous voulez des coins arrondis sur le tableau, vous devrez changer border-collapse par défaut de séparé ou simplement le supprimer tous ensemble. Après cela, vous pourrez appliquer border-radius . La démo est réactive et semble presque digne d'un mobile. Il y a une tonne d'autres problèmes que je pourrais résoudre, mais je pense qu'après avoir examiné cette démo et le lien ci-dessus, vous devriez résoudre votre vague problème.
<main>
<header>
<h1><b>N</b>octurnal Neighbor<b>s</b></h1>
</header>
<table>
<caption>Leader Board</caption>
<thead>
<tr><th colspan='2'></th></tr>
<tr><th>Name</th><th>Time</th></tr>
</thead>
<tbody>
<tr><td>Player One</td><td>1:00</td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</tbody>
</table>
</main>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
font: 700 calc(16px + 0.5vw)/calc(1.1em + 0.5vw) Georgia;
margin: .5em;
}
body {
overflow-x: auto;
overflow-y:scroll;
background: url(https://i.ibb.co/rvL6BRK/9LGTz.png) no-repeat;
background-attachment: fixed;
background-size: cover;
color: #fff;
text-align: center;
}
main {
margin: 0 auto;
width: 96vw;
height: auto;
}
header {
margin: 10px auto 0;
}
h1 {
font-variant:small-caps;
letter-spacing: 0.5vw;
font-size: calc(20px + 1.5vw);
margin: .5em 0
}
h1 b:first-of-type {
font-size: 1.15em;
vertical-align: bottom;
line-height:0.75;
}
h1 b:last-of-type{
font-size: 1.5em;
font-weight: 500;
line-height:0.75;
vertical-align: sub;
}
table {
font-size: 1rem;
width: 60vw;
min-width: 320px;
height: auto;
padding:0;
table-layout: fixed;
border-right: 3px ridge #fff;
border-left: 3px ridge #fff;
border-bottom: 3px ridge #fff;
border-bottom-left-radius:12px;
border-bottom-right-radius:12px;
border-spacing: 0px;
margin: 0 auto 20px;
}
thead tr:first-of-type {
padding: 0;
}
caption {
font-size: 1.2rem;
letter-spacing: 2px;
font-variant:small-caps;
padding:0;
border-top: 3px ridge #fff;
border-right: 3px ridge #fff;
border-left: 3px ridge #fff;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
width: 60vw;
min-width:320px;
}
td {
font-weight: 400;
}
thead tr:nth-of-type(2) th:first-of-type {
border-right: 0.5px inset #fff;
border-bottom: 1px inset #fff;
}
thead tr:nth-of-type(2) th:last-of-type {
border-left: 0.5px inset #fff;
border-bottom: 1px inset #fff;
}
tbody tr td:first-of-type {
border-right: 0.5px inset #fff;
border-bottom: 1px inset #fff;
}
tbody tr td:last-of-type {
border-left: 0.5px inset #fff;
border-bottom: 1px inset #fff;
}
tbody tr:last-of-type td {
border-bottom: 0px none transparent;
}
pouvez-vous ajouter une capture d'écran de ce que vous essayez d'accomplir?
J'ai ajouté une capture d'écran @DaFois
vérifie ma réponse