Menu

Tableau sur toute la largeur d'écran

- - Dernière réponse :  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
Afficher la suite 

Votre réponse

4 réponses

Messages postés
5310
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
9 décembre 2018
0
Merci
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"> 


Commenter la réponse de dugenou
0
Merci
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
dugenou
Messages postés
5310
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
9 décembre 2018
-
Il faut recharger la page, voire vider le cache, pour que la nouvelle configuration CSS s'applique.
Commenter la réponse de novis
0
Merci
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
dugenou
Messages postés
5310
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
9 décembre 2018
-
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.
pardon mais ça veut dire quoi teste en local?
dugenou
Messages postés
5310
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
9 décembre 2018
-
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.
Commenter la réponse de novis
0
Merci
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...
Commenter la réponse de novis