Div и вложенная в него широкая таблица (шире окна)

sigma77 · August 2, 2010

Всем привет,

Есть, если упростить код, подобная структура

<div class="wrapper">
  ...
  <table>...</table>
  ...
</div>

Таблица генерируется автоматичиски, т.е. ширина самой таблицы заранее не известна. Если ширина таблицы слишком большая и выходит за пределы окна, то див всё равно принимает ширину равную 100%. Соответственно, все остальные помещенные в него дивы и бэкграунды также прилипают к правой стороне браузера.

Вопрос, существует ли какое-нибудь решение, чтобы заставить див принимать всю ширину таблицы?

Пока остановилась на варианте display: table, но тут ИЕ7 в пролете. С display: inline-block, также были проблемы в Опере.

Верстка в принципе уже есть и менять её особенно нельзя.

Может кто знает решение по лучше?

psywalker · August 2, 2010

А что если на JS высчитывать ширину таблицы и присваивать её диву?

sigma77 · August 2, 2010

А что если на JS высчитывать ширину таблицы и присваивать её диву?

Ну, если ничего больше не придумается, то так и буду делать

Vlad · August 3, 2010

Насколько помню, display: table в IE работает, если еще есть display: table-row и display: table-cell. Надо добавить еще два <div> значит.

sigma77 · August 3, 2010

Да в том-то и дело, что в 7-м нет

Great Rash · August 3, 2010

Если ширина таблицы слишком большая и выходит за пределы окна, то див всё равно принимает ширину равную 100%.

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

sigma77 · August 3, 2010

Тестовую страницу сейчас возможности выложить нету. Если останется необходимость, то вечером.

Так что пока только код.

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head> <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
	* {margin: 0; padding: 0;}
	.wrapper {padding: 20px 0; background: silver;}
	table {width: 200%; background: green; border: 1px solid black;}
  </style>
  </head>
  <body>
	<div class="wrapper">
	  <table>
		  <tr>
			<td><div>Some text</div></td>
		  </tr>
	  </table>
	</div>		
  </body>
</html>

Т.е. у вас таблица уезжает за окно и вместе с ней уезжает контент? Честно говоря пока из описания не совсем понятно что происходит...

Проблема в том, что .wrapper не принимает всю ширину дочернего элемента (table), а только максимум ширину окна. Соответсвенно серый фон не заливает всю доступную по ширине область, а оканчивается у границы окна.

Добится надо противоположного эффекта. Чтобы ширина таблицы автоматически расширяла родительский div.

Great Rash · August 3, 2010

Какие проблемы с inline-block в Опере?

Возможно вам стоит решить проблему по другому, а именно:

1) создать див 100% на 100%

2) сказать ему overflow: auto;

3) запихнуть весь контент в него

sigma77 · August 3, 2010

Какие проблемы с inline-block в Опере?

В Опере пропадает при перезагрузке полоса прокрутки. И пока не проведешь мышкой по странице или не сделаешь резайз окна, не появляется.

Возможно вам стоит решить проблему по другому, а именно:
1) создать див 100% на 100%
2) сказать ему overflow: auto;
3) запихнуть весь контент в него

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

Great Rash · August 3, 2010

Т.к. если будет длинная страница, то придется скролить в самый низ, чтобы посмотреть пару строчек вверху.

Эта фраза разорвала мой мозг... (правда нифига не понял)

UPD:

Так, почему нельзя задать ovrflow: auto; для контейнера таблицы, чтобы глобального горизонтального скролла не появлялось вообще?

sigma77 · August 3, 2010

UPD:
Так, почему нельзя задать ovrflow: auto; для контейнера таблицы, чтобы глобального горизонтального скролла не появлялось вообще?

Потому что не по дизайну, да и скрол посреди окна смотрится не очень...

Great Rash · August 3, 2010

А так не пойдет?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			font-size: 100.1%;
		}

		body {
			margin: 20px;
			font: 62.5% 'Trebuchet MS', Arial, Tahoma, Verdana, sans-serif;
		}

		.wrapper {
			float: left;
			padding: 20px 0;
			background: silver;
		}

		table {
			width: 9000px;
			background: green;
			border: 1px solid black;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<div class="wrapper">
		<table>
			<tr>
				<td><div>Some text</div></td>
			</tr>
		</table>
	</div>

</body>
</html>

sigma77 · August 3, 2010

Great Rash,

Спасибо, вроде должно подойти.

mishka · August 3, 2010

Если в нормальных браузерах работает display:table, а в ие6-7 display:inline-block; то почему бы так и не сделать? всем table а для ие inline-block

psywalker · August 3, 2010

Если в нормальных браузерах работает display:table, а в ие6-7 display:inline-block; то почему бы так и не сделать? всем table а для ие inline-block

Слухи ходят, что Опере что-то не нравится.

Great Rash · August 3, 2010

Спишем это на конец рабочего дня и усталость psywalker'а

Слухи ходят, что Опере что-то не нравится.

всем table а для ие inline-block

sigma77 · August 3, 2010

Если в нормальных браузерах работает display:table, а в ие6-7 display:inline-block; то почему бы так и не сделать? всем table а для ие inline-block

В ИЕ7 с inline-block там тоже далеко не всё гладко.

Вообще уже хочется убить того кто делал верстку

psywalker · August 3, 2010

Спишем это на конец рабочего дня и усталость psywalker'а

Да, так и пожалуй и поступим, пора отдохнуть

Вообще уже хочется убить того кто делал верстку

Давно пора

Sign In

Div и вложенная в него широкая таблица (шире окна)

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information