Table de largeur 100% ne remplissant pas parent & lt; div & gt;

Une table d'une largeur de 100% n'est pas de remplir le div parent.

Exemple html:

<div style="width:100%; margin-top:20px;">
    <div style="width:100%; padding:5px; background:#ccc; font-weight:900;">Table Top</div>
    <table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #aaa;">
        <tr style="background:#eee;">
            <td>&nbsp;</td>
            <td><strong>L</strong></td>
            <td><strong>B</strong></td>
            <td><strong>H</strong></td>
            <td><strong>W</strong></td>
        </tr>
        <tr style="background:#fafafa;">
            <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
                Unit 1
            </td>
            <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
                550 mm
            </td>
            <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
                550 mm
            </td>
            <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
                25 mm
            </td>
            <td style="border:1px solid #ccc; border-width:1px 0 0 0;">
                60.00 kg
            </td>
        </tr>
    </table>
</div>

Ce produit la sortie suivante:

Table de largeur 100% ne remplissant pas parent & lt; div & gt;

La table n'est pas le remplissage de la div. Quel pourrait être le problème?

source d'informationauteur Nirmal

  1. 14

    L'en-tête div a une largeur de 100% et une marge de 5px qui provoque l'expansion de ses limites.
    Pourquoi ne pas utiliser un tableau pour le tout?

    Ici est une version de travail:

    <div style="width:100%; margin-top:20px;">
<div style="width:100%; background:#ccc; font-weight:900;"><div style="padding:5px;">Table Top</div></div>
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #aaa;">
    <tr style="background:#eee;">
        <td>&nbsp;</td>
        <td><strong>L</strong></td>
        <td><strong>B</strong></td>
        <td><strong>H</strong></td>
        <td><strong>W</strong></td>
    </tr>
    <tr style="background:#fafafa;">
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            Unit 1
        </td>
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            550 mm
        </td>
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            550 mm
        </td>
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            25 mm
        </td>
        <td style="border:1px solid #ccc; border-width:1px 0 0 0;">
            60.00 kg
        </td>
    </tr>
</table>

  2. 7

    Son un mythe que les tables sont plus faciles à coiffer, ils sont plus facile à certains égards, mais ils ont beaucoup de bizarreries de leur propre. Vous les utilisez correctement cependant, puisque vous êtes l'affichage des données tabulaires, alors ne laissez personne vous dire de ne pas les utiliser. Aussi, le tableau n'a vraiment rien à voir avec le problème ici.

    Dans ce cas, votre problème est la 5px rembourrage sur la <div> qui est à l'origine de la <div> être 10px plus grand que le 100%, il en serait autrement (10px parce qu'il a 5px ajouté de chaque côté).

    Les solutions: (l'une des actions suivantes permettront de résoudre le problème pour vous)

    • Donner votre <table> le même remplissage comme le <div>
    • Mettre le rembourrage sur la partie externe du <div>
    • Modifier le padding sur le <div> à s'appliquer uniquement pour le haut et le bas, avec zéro de remplissage à gauche et à droite (padding:5px 0 ou padding-top:5px; padding-bottom:5px;`).
    • Mettre le <div> l'intérieur d'un autre <div> et le style de l'extérieur de l'un des deux width:100% et l'intérieur padding:5px;

    Si je devais choisir l'un de ces, j'irais avec le padding-top/padding-bottom option, mais ils doivent tous travailler pour vous; il dépend exactement comment vous voulez qu'il regarde.

    Aussi, gardez à l'esprit que <div>s sont en pleine largeur par défaut, de sorte que vous n'avez pas besoin de la width:100% sur votre div. En fait, le retrait qui peut même résoudre le problème lui-même depuis la div sera adapter à son environnement, de sorte que peut prendre le rembourrage en compte.

  3. 1

    La chose à faire ici, peut-être d'utiliser un en-tête de tableau (thead) au lieu de la div et puis vous n'avez pas de gâchis avec rembourrage. Ceci aide également avec le SEO et est plus propre balisage de la page.

    <div style="width:100%; margin-top:20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #aaa;">
    <thead>
        <tr style="background:#ccc; font-weight:900;">
            <th>Table Top</th>
        </tr>
    </thead>
    <tr style="background:#eee;">
        <td>&nbsp;</td>
        <td><strong>L</strong></td>
        <td><strong>B</strong></td>
        <td><strong>H</strong></td>
        <td><strong>W</strong></td>
    </tr>
    <tr style="background:#fafafa;">
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            Unit 1
        </td>
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            550 mm
        </td>
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            550 mm
        </td>
        <td style="border:1px solid #ccc; border-width:1px 1px 0 0;">
            25 mm
        </td>
        <td style="border:1px solid #ccc; border-width:1px 0 0 0;">
            60.00 kg
        </td>
    </tr>
</table>
  4. -1

    Cellpadding="5" est ce qui est à l'origine de la discrepency.