Как сделать таблицу 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, это создает приятный эффект «вложенности»).
Ответы 13
Следующее работает для меня в 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>
См. Пример здесь.
Ты прав. Не помню! Может быть, я хотел следовать разметке, которую, как я думал, использует OP? Я отредактирую.
В случае, когда вы автоматически генерируете код, который может иметь поля, добавление простого не стилизованного элемента <div>, обертывающего вашу таблицу, может помочь.
Это большая проблема с тем, как CSS обрабатывает свойство ширины, и причина, по которой Microsoft сначала по-другому реализовала блочную модель. Microsoft проиграла, и теперь у элемента либо ширина, либо поля / отступы / границы.
Ситуация может измениться к лучшему в CSS3 с свойство размера коробки
Я всегда использовал <table width = "100%">
Правильно. Это так просто. Просто используйте CSS, например #my-parent-div table{margin: 100%;}
Может, поможет эта обширная статья про Internet Explorer и блочная модель CSS?
попробуй это:
div {
padding: 0px;
}
table {
width: 100%;
margin: 0px;
}
установив заполнение div равным нулю, вы удалите пространство между границами div и его содержимым. установив ширину таблицы на 100% и поле на ноль, вы удалите пространство между границами таблицы и ее контейнером.
Ширина в процентах рассчитывается относительно первого родительского элемента, для которого указана ширина. Если для вашего div не указана ширина, тогда ширина таблицы не имеет к этому никакого отношения. Можете ли вы опубликовать упрощенную версию разметки, которая показывает, как выглядит ваше дерево DOM?
С другой стороны, если ваш родительский div ДЕЙСТВИТЕЛЬНО имеет установленную ширину, а поля все еще влияют на вашу таблицу, вы, вероятно, находитесь в режиме причуд. Вы указали свой DOCTYPE, но имейте в виду, что элемент DOCTYPE ДОЛЖЕН быть первой строкой в файле. При работе с IE6 следует еще кое-что отметить, по умолчанию, если ваш контент шире, чем ваш родительский, родительский элемент будет растянут, чтобы приспособиться, вы можете остановить это, добавив overflow: hidden к вашему css для родительского элемента, но в процессе вы можете скрыть часть содержимого дочернего элемента.
Не совсем уверен, в чем проблема - это отлично работает в IE6 / 7 и FF3. Установка ширины элемента DIV .container устанавливает ширину таблицы. Добавление полей к 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>
Кстати, есть ли у вас веская причина не использовать строгий доктайп? Строгий всегда должен быть значением по умолчанию. переходный предназначен только для устаревшего кода.
Я понял суть проблемы. Это связано с border-collapse. У меня уже давно была такая же проблема. Поскольку у таблиц часто тонкие границы, проблема не очевидна для большинства людей. Если вы поместите обычную таблицу со 100% шириной внутри div, как это сделал Нейт, все будет в порядке.
Однако, если вы укажете border-collapse:collapse в таблице, таблица выйдет за пределы div. Это не очевидно для большинства людей, потому что он может вырваться только на один пиксель или, в зависимости от контекста, в котором он находится, и пользовательского агента, возможно, не совсем.
Чтобы было понятнее, что происходит, попробуйте следующее: поместите пример Нейта рядом с примером Дэвида Хегги в html-файле.
Похоже, оба работают нормально. Но теперь измените встроенный TD-стиль Нейта на border: 40px solid blue. Измените стиль таблицы Дэвида на border: 40px solid #999;. На этом этапе таблица Дэвида вырывается из блока на 50% с каждой стороны. Нейт все еще работает.
Поставьте стиль border-collapse:collapse на стол Нейта и его брейки тоже.
Причина в border-collapse!
Следующий код работает в 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. Я установил красную и синюю границы, чтобы увидеть, куда расширяются области, для более визуальной проверки.
перелив: авто; на самом внешнем div может помочь, если вы видите странные вещи - например, самый внешний div меньше, чем вы этого хотите, или не занимает весь размер div внутри него.
Добавьте приведенный ниже CSS в свой <table>:
table-layout: fixed;
width: 100%;
После того, как вы сказали не устанавливать ширину и поля для одного и того же элемента, вы делаете именно это для своего примера div. Просто любопытно, почему?