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

4 réponses

  1.
    dugenou Messages postés 6262 Statut Contributeur 1 455
     
    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
  2. 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
    1. dugenou Messages postés 6262 Statut Contributeur 1 455
       
      Il faut recharger la page, voire vider le cache, pour que la nouvelle configuration CSS s'applique.
      0
  3. 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
    1. dugenou Messages postés 6262 Statut Contributeur 1 455
       
      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
    2. novis
       
      pardon mais ça veut dire quoi teste en local?
      0
    3. dugenou Messages postés 6262 Statut Contributeur 1 455
       
      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
  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