Tableau CSS avec bordure dashed

**Kira1981** · 07/06/2019, 18h36

Bonsoir,
J'ai créé un tableau en css avec des bordure en tiret mais j'ai un résultat bizarre.
les lignes sont discontinues en haut et ça fais très très moche.
J'aimerais bien savoir où se trouve mon erreur.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<table>
		                <tr>
			            <td><a>Accueil</a></td>
			            <td><a>Présentation</a></td>
			            <td><a>Agenda</a></td>
			            <td><a>Blog</a></td>
			            <td><a>Dans la presse</a></td>
		                </tr>
                        </table>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
table {
border: 1px dashed #fff;
border-collapse: collapse;
table: inline-table;
width: 100%;
margin:0 auto;
border-width:thin;
}
td {
font-family: sans-serif;
border: 1px dashed #fff;
padding: 10px;
text-align: center;
}
td:hover {
     background-color:#fff;
}

**Realc** · 07/06/2019, 21h54

Salut, commence par modifier cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
table {
table: inline-table;
}

Par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
table {
display: inline-table;
}

Et ajoute une balise body :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<table>
                 <body>
		                <tr>
			            <td><a>Accueil</a></td>
			            <td><a>Présentation</a></td>
			            <td><a>Agenda</a></td>
			            <td><a>Blog</a></td>
			            <td><a>Dans la presse</a></td>
		                </tr>
                   </body>
           </table>

En ce qui concerne les couleurs met les codes hexadécimaux composés de 6 caractères.

J'ai expérimenté ton problème sur https://jsfiddle.net/ et le problème vient simplement des bordures dashed, le mieux est que tu ne met pas le border-collapse: collapse;.
Ou sinon ne pas faire un menu en utilisant une table mais une liste que tu affiche en display : inline-block;

**NoSmoking** · 08/06/2019, 10h20

Bonjour,

Envoyé par Kira1981

les lignes sont discontinues en haut et ça fais très très moche.

C'est quand même ce que tu demandes : border: 1px dashed #fff; !

Envoyé par Realc

Salut, commence par modifier cela :

dans le pire des cas table: inline-table est purement et simplement ignoré.

Envoyé par Realc

Et ajoute une balise body :

je pense que tu voulait parler de <tbody> !

Envoyé par Realc

En ce qui concerne les couleurs met les codes hexadécimaux composés de 6 caractères.

la forme #ABC est tout à fait conforme et est traduite par #AABBCC.

est que tu ne met pas le border-collapse: collapse;

c'est déjà le cas semble-t-il !

Envoyé par Realc

Ou sinon ne pas faire un menu en utilisant une table mais une liste que

Tout à fait, il y a tellement d'autres façons de faire qu'utiliser un élément <table> est inconvenant, <nav> est un élément plus convenable !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<nav>
  <a href="">Accueil</a>
  <a href="">Présentation</a>
  <a href="">Agenda</a>
  <a href="">Blog</a>
  <a href="">Dans la presse</a>
</nav>

Tableau CSS avec bordure dashed

Tableau en CSS

Discussions similaires

Partager

Partager