Sujet Précédent Sujet Suivant

Tableau sur toute la largeur d'écran

Fermé
novis - 24 nov. 2018 à 13:38
 novis - 24 nov. 2018 à 17:21
Bonjour,

Je souhaite que mes différents tableaux s'adaptent à la taille des écrans sur toute la largeur. Il faut donc utiliser du css et utiliser la particularité "fluid".
Par contre je n'y arrive pas du tout...

Est-il possible d'avoir un coup de main pour réaliser cela?
merci beaucoup.

novis
pour info mon code de tableau est: 
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width:100%;">
	<tbody>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</tbody>
</table>


Mais je ne parviens pas à allier le css. Pourtant, je l 'ai beaucoup utilisé pour d'autres effets sur mon site mais là, ca bloque...

Configuration: Windows / Firefox 63.0
A voir également:

4 réponses

Réponse 1 / 4
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
24 nov. 2018 à 15:30
Bonjour,

Il faut utiliser une class.

Le CSS : 

.table
{
margin-left:auto;
margin-right:auto;
width:100%;
}


Le HTML : 

<table class="table" border="1" cellpadding="1" cellspacing="1">


0
Réponse 2 / 4
novis
24 nov. 2018 à 16:12
Bonjour,

Merci pour votre réponse.
J'ai fait un test afin de voir si cela fonctionne. Et mon tableau ne s'affiche pas à 100% sur la largeur de l'écran.
Voilà mes codes: 

<table border="1" cellpadding="1" cellspacing="1" class="table">
	<tbody>
		<tr>
			<td>TABLEAU TEST 1</td>
			<td>TABLEAU TEST 2</td>
			<td>TABLEAU TEST 3</td>
		</tr>
	</tbody>
</table>



.table
{
margin-left:auto;
margin-right:auto;
width:100%;
}


et bien sur j'ai mis ce qui fait le lien entre le html et le css.
Je ne comprends pas...

Merci de votre aide

novis
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
24 nov. 2018 à 16:20
Il faut recharger la page, voire vider le cache, pour que la nouvelle configuration CSS s'applique.
0
Réponse 3 / 4
novis
24 nov. 2018 à 16:44
J'ai vidé le cache mais cela ne s'applique pas.
Je passe par un hébergeur (wifeo), est ce que le problème peut venir de là?

Pourtant pour les autres codes css ou js je n'ai pas eu de problèmes...

novis
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
24 nov. 2018 à 16:53
Teste en local le code HTML et le CSS. Chez moi, le tableau s'affiche en pleine page.
Je ne vois pas pourquoi ça ne fonctionnerait pas chez Wifeo.
0
novis
24 nov. 2018 à 16:56
pardon mais ça veut dire quoi teste en local?
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
24 nov. 2018 à 17:07
Avec un éditeur de texte comme le bloc note, crée un fichier nommé test.html, par exemple.

Dans ce fichier test.html, place ce code : 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
.table
{
margin-left:auto;
margin-right:auto;
width:100%;
}
</style>
</head>

<body>
<table border="1" cellpadding="1" cellspacing="1" class="table">
	<tbody>
		<tr>
			<td>TABLEAU TEST 1</td>
			<td>TABLEAU TEST 2</td>
			<td>TABLEAU TEST 3</td>
		</tr>
	</tbody>
</table>
</body>
</html>


Enregistre, puis fais un clic droit dessus et choisis ouvrir avec ton navigateur.
0
Réponse 4 / 4
novis
24 nov. 2018 à 17:21
Je n'y arrive pas, du coup j'ai fait le test par jsfiddle
et effectivement le code fonctionne.
Je ne comprends pas ce qui bloque lorsque je l'insère sur mon site...
ennuyeux...
0

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses