La largeur de la table 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>

Je suis en train de mettre la table largeur de 100% pour le tableau ci-dessus, mais il n'a pas d'effet, il va au-delà de la largeur de la fenêtre. comment puis-je changer la largeur de la table de sorte qu'il est de même taille que la fenêtre.

source d'informationauteur user2959594

  1. 16

    Le problème est que le contenu à l'intérieur de votre table nécessite plus d'espace que 100% de votre fenêtre de la taille d'offres.

    Ce que vous pourriez faire est d'utiliser le trop-plein de la propriété de feuille de style CSS. Essayez l'exemple suivant et ont choisi, si c'est 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 le dépassement de la propriété: visible, caché, de défilement et de l'automobile. L'exemple ci-dessus illustre le parchemin en option, ce qui ajoute une barre de défilement à la table elle-même.

  2. 11

    Il n'y a rien que vous pouvez faire si le contenu de la table est trop grande (comme dans votre exemple), en dehors de modifier le contenu pour le rendre possible pour le navigateur pour l'afficher dans un format plus étroit. Réglage width:100%; n'aura aucun effet si le contenu est trop large. Le navigateur va juste recours à l'affichage d'une barre de défilement horizontale.

    Vous pouvez rendre votre contenu plus étroit par:

    • Réduire le nombre de colonnes
    • à l'aide de CSS white-space: nowrap sur le contenu, de sorte que le navigateur a l'option de l'emballage que le contenu de garder la largeur bas.
    • Réduire les marges, les bordures, remplissage que vous avez
    • Réduire la taille de la police
    • Utilisation word-wrap:break-word ou word-break: break-all;
    • Débordement du contenu qui ne correspondent pas à la largeur de l'écran avec overflow: scroll; (vos options sont visibles, cachés, de défilement et de l'automobile)

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

  3. 0

    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>
  4. -4

    vous pouvez mettre une classe dans votre table comme 

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

    et à partir de votre css, vous mettez 

      .size{

             width : 100%;

             }

    et vous devriez mettre le lien de votre css entre
    comme ceci :

    <link href="css/YOUR_CSS.css" rel="stylesheet" type="text/css" media="all" />