Как сделать таблицу HTML той же шириной, что и ее тег div?

У меня есть стол внутри div. Я хочу, чтобы таблица занимала всю ширину тега div.

В CSS я установил width таблицы на 100%. К сожалению, когда в div есть какой-то margin, таблица заканчивается шире, чем в div.

Мне нужно поддерживать IE6 и IE7 (так как это внутреннее приложение), хотя я, очевидно, хотел бы полностью кросс-браузерное решение, если это возможно!

Я использую следующий DOCTYPE...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Редактировать: К сожалению, я не могу жестко закодировать ширину, так как я динамически генерирую HTML, и это включает в себя рекурсивное вложение элементов div внутри друг друга (с левым полем для каждого элемента div, это создает приятный эффект "вложенности") ,

Ответы

Ответ 1

Добавьте ниже CSS к вашему <table>:

table-layout: fixed;
width: 100%;

Ответ 2

Следующие действия для меня в Firefox и IE7... являются ориентиром, но это: если вы задаете ширину элемента, не устанавливайте маркер или дополнение на один и тот же элемент. Это справедливо, особенно если вы смешиваете единицы - скажем, смешивая проценты и пиксели.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div style="width: 500px; background-color:#F33;">
      This is the outer div
      <div style="background-color: #FAA; padding: 10px; margin:10px;">
        This is the inner div
        <table cellpadding="0" cellspacing="0" style="width: 100%">
          <tr>
            <td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

См. здесь для примера.

Ответ 3

Процентные ширины относятся к первому родительскому элементу, для которого указана ширина. Если у вашего div не указана ширина, то ширина таблицы не имеет к этому никакого отношения. Можете ли вы опубликовать упрощенную версию разметки, которая показывает, как выглядит ваше дерево DOM?

С другой стороны, если ваш родительский div ДОЛЖЕН установить ширину, и поле все еще влияет на вашу таблицу, то вы, вероятно, находитесь в режиме причуд. Вы указали свой DOCTYPE, но помните, что элемент DOCTYPE ДОЛЖЕН быть первой строкой в файле. Что еще нужно отметить при работе с IE6, по умолчанию, если ваш контент шире, чем ваш родитель, родитель будет растянут для размещения, вы можете остановить это, добавив overflow: hidden к вашему css для родительского элемента, но в процессе вы можете скрыть часть содержимого дочернего элемента.

Ответ 4

Не совсем уверен, что проблема здесь - это отлично работает в IE6/7 и FF3. Установка ширины элемента .IV контейнера DIV устанавливает ширину таблицы. Добавление полей в div.container не влияет на таблицу. Может быть, есть что-то еще в вашей разметке /CSS, которые влияют на макет?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <title>Boxes and Tables</title>
        <style type="text/css">

        div.container {
            background-color: yellow;
            border: 1px solid #000;
            width: 500px;
            margin: 5px auto;
        }

        table.contained {
            width: 100%;
            border-collapse: collapse;
        }

        table td {
            border: 2px solid #999;
        }

        </style>
    </head>

    <body>
        <div class="container">
            <table class="contained">
                <thead>
                    <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
                </thead>
                <tbody>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Ответ 5

Я выяснил суть проблемы здесь. Это связано с border-collapse. У меня была такая же проблема некоторое время сейчас. Поскольку таблицы часто имеют тонкие границы, проблема не очевидна для большинства людей. Если вы поместите обычную таблицу с шириной, равной 100%, внутри div, как и у Нейта, все будет в порядке.

Однако, если вы укажете border-collapse:collapse на таблице, таблица выйдет из div. Это неочевидно для большинства людей, поскольку оно может разбиваться только на один пиксель или в зависимости от контекста, в котором он находится, и пользовательского агента, возможно, совсем не так.

Чтобы было яснее, что происходит, попробуйте следующее: поместите пример Нейта рядом с примером Дэвида Хегги в HTML файл.

Это будет выглядеть как хорошо. Но теперь измените стиль Nate inline TD на border: 40px solid blue. Измените стиль таблицы David David на border: 40px solid #999;. В этот момент стол Дэвида выходит из деления на 50% его границы с каждой стороны. Нейт все еще работает. Поместите стиль border-collapse:collapse на стол Нейта, и теперь его перерывы тоже.

Это border-collapse, что вызывает это!

Ответ 6

В случае, когда вы автоматически генерируете код, который может иметь поля на нем, добавление простого, неэтилированного элемента <div>, который может обернуть вашу таблицу, может сделать трюк.

Ответ 7

Я всегда использовал <table width="100%">

Ответ 8

Это большая проблема с тем, как CSS трактует свойство width и причину, по которой Microsoft впервые применила модель коробки. Microsoft потеряла, и теперь это либо ширина, либо margin/padding/border для элемента.

Ситуация может измениться лучше в CSS3 с свойство размера окна

Ответ 10

попробуйте следующее:

div {
 padding: 0px;
}

table {
    width: 100%;
    margin: 0px;
}

установив заполнение div на ноль, вы удалите пространство между границами div и его содержимым. установив ширину таблицы на 100%, и она будет равна нулю, вы удалите пространство между границами таблицы и контейнера.

Ответ 11

Кстати, есть ли у вас веская причина не использовать строгий doctype? Строгое должно всегда быть значением по умолчанию. переходный предназначен только для устаревшего кода.

Ответ 12

Следующий код работает на IE6/8, Chrome, Firefox, Safari:

<style type="text/css">
    div.container 
    {
        width: 500px;
        padding: 10px;
        margin: 10px;
        border: 1px solid red;
    }
    table.contained 
    {
        width: 100%;
        border: 1px solid blue;
    }
</style>

<div class="container">
    <table class="contained">
    <tr>
        <td>Hello</td><td>World</td>
    </tr>
    </table>
</div>

Попробуйте скопировать и вставить и построить на нем (просто переместите часть стиля в заголовок или в отдельный .css файл), возможно, способ использования встроенного CSS (с использованием тега стиля) имеет какое-то отношение к проблема, или это какой-то другой CSS, окружающий блоки таблицы div? Плавающие также могут вызвать проблемы.

P.S. Я установил красную и синюю границы, чтобы увидеть, где области расширяются для более визуальной проверки.

Ответ 13

переполнение: авто; на внешнем div может помочь, если вы видите странные вещи - например, самый внешний div меньше, чем вы хотите, или не занимаете весь размер разделов внутри него.