web-dev-qa-db-fra.com

Comment puis-je adapter un tableau CSS à la largeur de l'écran?

Actuellement, le tableau est trop large et le navigateur ajoute une barre de défilement horizontale.

htmlcssscrollbarcss-tables
20
David B

Si la table contenu est trop large (comme dans cet exemple ), vous ne pouvez rien faire d'autre que modifier le contenu pour permettre au navigateur de l'afficher dans un format plus étroit. Contrairement aux réponses précédentes, régler la largeur à 100% n'aura absolument aucun effet si le contenu est trop large (comme le lien et celui-ci le démontrent). Les navigateurs essaient déjà de conserver les tableaux dans les marges gauche et droite s’ils le peuvent, et n’utilisent une barre de défilement horizontale que s’ils ne le peuvent pas.

Vous pouvez modifier le contenu de certaines manières pour rendre un tableau plus étroit:

  • Réduisez le nombre de colonnes (en divisant peut-être un tableau mégalithique en plusieurs tableaux indépendants).
  • Si vous utilisez CSS white-space: nowrap sur l'un des contenus (ou l'ancien attribut nowrap,  , un élément nobr, etc.), voyez si vous pouvez vivre sans eux afin que le navigateur puisse envelopper le contenu pour conserver la largeur. vers le bas.
  • Si vous utilisez des marges très larges, du rembourrage, des bordures, etc., essayez de réduire leur taille (mais je suis sûr que vous y avez pensé).

Si le tableau est trop large mais que vous n'en voyez pas la raison (le contenu n'est pas aussi large, etc.), vous devrez fournir plus d'informations sur la manière dont vous stylisez le tableau, les éléments environnants. , etc. Encore une fois, par défaut, le navigateur évitera la barre de défilement s’il le peut.

17
T.J. Crowder

CSS:

table { 
    table-layout:fixed;
}

Mise à jour avec CSS à partir des commentaires: 

td { 
    overflow: hidden; 
    text-overflow: Ellipsis; 
    Word-wrap: break-Word;
}

Pour les téléphones mobiles, je laisse la largeur du tableau, mais assigne une classe CSS supplémentaire au tableau pour permettre le défilement horizontal (le tableau ne passe plus sur l'écran du mobile): 

@media only screen and (max-width: 480px) {
    /* horizontal scrollbar for tables if mobile screen */
    .tablemobile {
        overflow-x: auto;
        display: block;
    }
}

Assez suffisant.

31
Kai Noack
table { width: 100%; }

Ne produira pas le résultat exact que vous attendez, à cause de toutes les marges et rembourrages utilisés dans le corps. Donc, si les scripts sont OK, alors utilisez Jquery.

$("#tableid").width($(window).width());

Sinon, utilisez cet extrait

<style>
    body { margin:0;padding:0; }
</style>
<table width="100%" border="1">
    <tr>
        <td>Just a Test
        </td>
    </tr>
</table>

Vous remarquerez que la largeur couvre parfaitement la page.

La chose principale est d’annuler les variables margin et padding comme je l’ai montré dans le corps, vous êtes prêt.

7
Starx

Que diriez-vous:

table { 
   width: 100%; 
}

Vous avez peut-être des images trop grandes qui élargissent le tableau.

Vérifiez également l’apparence de votre table dans les autres navigateurs. 

0
True Soft

Placez la table dans un élément conteneur qui a 

débordement: faire défiler; largeur maximale: 95 vw;

ou adapter le tableau à l’écran et le dépasser: faites défiler toutes les cellules du tableau.

0
Khayri R.R. Woulfe

Il existe déjà une bonne solution à cette question, mais tout le monde a oublié la taille de la police. C'est la dernière solution, mais non la moindre. vous pouvez diminuer votre taille de police de 2 ou 3 px. il sera toujours bien visible pour l'utilisateur et pour un peu, vous pouvez réduire la largeur de votre table. cela a fonctionné pour moi. comme ma table a 5 colonnes 4 montrant parfaitement 5ème est sorti du viewport. donc j'ai diminué la taille de la police et les 5 colonnes sont intégrées dans l'écran

table th td
{
 font-size:14px;
}

Pour votre information, si vos tables comportent trop de colonnes mais que vous ne pouvez pas les réduire, réduisez la taille de la police si vous préférez un défilement horizontal. il y a deux avantages. votre style pour le Web mobile restera le même (bon sans défilement horizontal) et lorsque l'utilisateur voit de petite taille, la plupart des utilisateurs effectuent un zoom sur le tableau jusqu'au niveau de confort souhaité.

0
gourav bajaj

Définissez font-size en unités liées à viewport-width, par exemple:

table { font-size: 0.9vw; }

Cela rend la police illisible lorsque la page est trop étroite, mais cela est parfois acceptable.

0
Sergey M