Таблица ширины 100% не заполняет родительский <div>

Ответ 1

Заголовок div имеет ширину 100% и заполнение 5 пикселей, что приводит к его расширению за пределы. Почему бы не использовать таблицу для всего этого?

Вот рабочая версия:

<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

Его миф о том, что таблицы проще в стилистике - в некоторых отношениях они легче, но у них много собственных причуд. Вы используете их правильно, хотя, поскольку вы показываете табличные данные, поэтому не позволяйте никому говорить вам, чтобы вы их не использовали. Кроме того, таблица действительно не имеет ничего общего с этой проблемой.

В этом случае ваша проблема - это заполнение 5px на <div>, которое приводит к тому, что значение <div> будет на 10px больше, чем 100%, это было бы иначе (10px, потому что с 5px добавлено в обе стороны).

Решения: (любой из нижеперечисленных вопросов поможет решить проблему)

• Придайте <table> те же дополнения, что и <div>
• Поместите прокладку на внешний <div>
• Измените дополнение на <div>, чтобы применить только верх и низ, с нулевым заполнением влево и вправо (padding:5px 0 или padding-top: 5px; padding-bottom: 5px; `).
• Поместите <div> внутри другого <div> и создайте внешний один из двух width:100% и внутренний padding:5px;

Если бы мне пришлось выбрать один из них, я бы пошел с опцией padding-top/padding-bottom, но все они должны работать на вас; это зависит от того, как вы хотите, чтобы он выглядел.

Также учтите, что <div> по умолчанию имеет полную ширину, поэтому вам не нужно width:100% на вашем div. Фактически, удаление, которое может даже решить проблему самостоятельно, так как div подойдет к ее окружению, поэтому может учитываться дополнение.

Ответ 3

Здесь нужно использовать заголовок таблицы (thead) вместо div, а затем вам не нужно вообще путаться с заполнением. Это также помогает в SEO и является более чистой разметкой для страницы.

<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

Cellpadding = "5" - это то, что вызывает несоответствие.