web-dev-qa-db-fra.com

La largeur du tableau HTML ne fonctionne pas

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <table border="1" width="100%">

        <tr>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>


    </table>




</body>
</html>

J'essaie de régler la largeur de la table à 100% pour la table ci-dessus, mais cela n'a aucun effet, cela dépasse la largeur de la fenêtre. Comment puis-je changer la largeur de la table afin qu'il soit la même taille que la fenêtre.

htmlcsswidthhtml-table
15
user2959594

Le problème est que le contenu de votre tableau nécessite plus d'espace que 100% de vos offres de la taille d'une fenêtre. 

Ce que vous pourriez faire, c'est utiliser la propriété overflow de CSS. Essayez l'exemple suivant et choisissez s'il s'agit d'une option pour vous:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
    .table {
        color: green;
        display: block;
        max-width: 100%;
        overflow: scroll; <!-- Available options: visible, hidden, scroll, auto -->
    }
</style>
</head>
<body>

<table border="1" class="table">

    <tr>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>


</table>
</body>
</html>

Il y a 4 options disponibles pour la propriété overflow: visible, masqué, défilement et auto. L'exemple ci-dessus illustre l'option scroll, qui ajoute une barre de défilement à la table elle-même.

18
DonnyDee

Vous ne pouvez rien faire si le contenu du tableau est trop large (comme dans votre exemple), mis à part modifier le contenu pour permettre au navigateur de l'afficher dans un format plus étroit. Le réglage de width:100%; n'aura aucun effet si le contenu est trop large. Le navigateur aura simplement recours à une barre de défilement horizontale.

Vous pouvez rendre votre contenu plus étroit en:

  • Réduire le nombre de colonnes
  • en utilisant CSS white-space: nowrap sur n’importe quel contenu, le navigateur a donc la possibilité d’emballer ce contenu pour réduire la largeur.
  • Réduisez les marges, les bordures et les rembourrages que vous avez
  • Réduire la taille de la police
  • Utilisez Word-wrap:break-Word ou Word-break: break-all;
  • Débordez le contenu qui ne correspond pas à la largeur de l'écran avec overflow: scroll; (vos options sont visibles, masquées, de défilement et automatiques)

Le navigateur évite la barre de défilement s'il le peut, mais ne le fera pas si le contenu ne peut pas tenir dans la largeur de la page.

13
tomsullivan1989

Vous pouvez mettre un élément dans les cellules - c'est ce que j'ai fait.

<table>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
</table>
0
Stevoh