it-swarm-ru.tech

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

У меня есть стол внутри 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 это создает приятный эффект «вложенности»). ).

19
Chris Roberts

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

table-layout: fixed;
width: 100%;
11
Sharad Biradar

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

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

7
Nate

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

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

4
Eric DeLabar

Не совсем уверен, что проблема здесь - это прекрасно работает в 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>
3
David Heggie

Я выяснил суть проблемы здесь. Это связано с 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, который вызывает это!

2
Chris

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

1
Nate

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

1
Joe Morgan

Следующий код работает на 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? Плавающий может также создать проблемы.

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

0
Nestor

Может быть, эта обширная статья о Internet Explorer и блочной модели CSS поможет?

0
Christian Davén

Это большая проблема с тем, как CSS обрабатывает свойство width, и причина, по которой Microsoft сначала по-разному реализовала блочную модель. Microsoft проиграла, и теперь это либо ширина, либо поле/отступ/граница для элемента. 

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

0
buti-oxa

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

0
William

попробуй это:

div {
 padding: 0px;
}

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

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

0
farzad

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

0
Konrad Rudolph