Tableau sur toute la largeur d'écran

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 Contributeur
    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
    1. 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 Contributeur
        Il faut recharger la page, voire vider le cache, pour que la nouvelle configuration CSS s'applique.
        0
    2. 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 Contributeur
        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 Contributeur
        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
    3. 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

      8 réponses