Как я делаю HTML-таблицу той же шириной как ее содержание тега Div?

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

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

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

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

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

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

21
задан Priyanga 15 October 2019 в 06:39
поделиться

10 ответов

Следующие работы для меня в 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
ответ дан 29 November 2019 в 21:07
поделиться

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

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

4
ответ дан 29 November 2019 в 21:07
поделиться

Едва ли уверенный, что проблема здесь - это хорошо работает в IE6/7 и FF3. Установка ширины .container элемента DIV устанавливает таблицу width. Добавление полей .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>
3
ответ дан 29 November 2019 в 21:07
поделиться

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

1
ответ дан 29 November 2019 в 21:07
поделиться

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

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

Для создания этого более ясным, что продолжается попробуйте это: Поместите пример Nate рядом с примером David Heggie в файле HTML.

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

Это border-collapse, который вызывает его!

2
ответ дан 29 November 2019 в 21:07
поделиться

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

1
ответ дан 29 November 2019 в 21:07
поделиться

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

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

0
ответ дан 29 November 2019 в 21:07
поделиться

Возможно, эта обширная статья приблизительно Internet Explorer и модель фрагмента CSS поможет?

0
ответ дан 29 November 2019 в 21:07
поделиться

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

div {
 padding: 0px;
}

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

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

0
ответ дан 29 November 2019 в 21:07
поделиться

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

0
ответ дан 29 November 2019 в 21:07
поделиться
Другие вопросы по тегам:

Похожие вопросы: