Как сделать таблицу HTML такой же ширины, что и содержащий ее тег div? - PullRequest
Новая
       63

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

20 голосов
/ 16 сентября 2008

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

В CSS я установил ширину таблицы на 100%. К сожалению, когда у div есть какое-то поле, таблица оказывается шире, чем у 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 это создает хороший «вложенный» эффект).

Ответы [ 13 ]

12 голосов
/ 20 февраля 2015

Добавьте следующий CSS к вашему <table>: 

table-layout: fixed;
width: 100%;
7 голосов
/ 16 сентября 2008

Следующее работает для меня в 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>

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

4 голосов
/ 17 сентября 2008

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

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

3 голосов
/ 17 сентября 2008

Не совсем уверен, в чем здесь проблема - это прекрасно работает в IE6 / 7 и FF3. Установка ширины элемента DIV .container устанавливает ширину таблицы. Добавление полей в .container div не влияет на таблицу. Может быть, в вашей разметке / 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>
2 голосов
/ 16 марта 2009

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

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

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

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

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

1 голос
/ 16 сентября 2008

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

1 голос
/ 16 сентября 2008

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

0 голосов
/ 16 октября 2012

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

0 голосов
/ 11 октября 2010

Следующий код работает на 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. Я установил красные и синие границы, чтобы увидеть, где области расширяются для более визуальной проверки.

0 голосов
/ 17 сентября 2008

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...