Tableau sur toute la largeur d'écran

novis -  
 novis -
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   Statut Contributeur Dernière intervention   1 452
 
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
 
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   Statut Contributeur Dernière intervention   1 452
 
Il faut recharger la page, voire vider le cache, pour que la nouvelle configuration CSS s'applique.
0
Réponse 3 / 4
novis
 
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   Statut Contributeur Dernière intervention   1 452
 
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
 
pardon mais ça veut dire quoi teste en local?
0
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452
 
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
 
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