Как сделать динамическое изменение ширины?

PND · November 12, 2009

Привет, искал что-то подобное, но не смог ничего найти.

Суть такая, есть таблицы. Надо их выровнять по левому краю. Ограничить в 1000пх. И суть в том, что надо что бы при добовлении новых таблиц в диве, они не переходили в следующую строчку, а оставались в нынешней и просто появлялась полоса прокрутки.

Вот сделал небольшой пример как это должно выглядеть. Тык.

Надо что бы когда эти блоки умещаются в 1000рх, то просто выравнивались по левому краю ( float:left типа ),а когда выходят за рамки, то появлялась полоса прокрутки. Как overflow:auto; но главное что бы оставались в 1 строчку. С фотками и текстом я такого эффекта добивался так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#rr { overflow:auto; background:#330033; width:1000px;}
-->
</style>
</head>

<body>


<table width="200" border="1">
  <tr>
	<td nowrap="nowrap">
	<div id="rr">

<img src="x_be5bc471.jpg" />
<img src="x_be5bc471.jpg" />
<img src="x_be5bc471.jpg" />
<img src="x_be5bc471.jpg" />
<img src="x_be5bc471.jpg" />
<img src="x_be5bc471.jpg" />

	</div>
	</td>
  </tr>
</table>




</body>
</html>

А с таблицами и дивами не выходит. Если использовать ячейку таблицы с nowrap="nowrap" , то весь текст будет в строчку, а в блоке он должен быть в столбик. Надеюсь понятно объяснил. Прошу помочь.

Great Rash · November 13, 2009

А если засунуть все таблицы в див, которому сказать white-space: nowrap;, а самим таблицам сказать display: inline-block;?

PND · November 13, 2009

Попробовал, кое что добавил и стало работать как надо , но только в опере. В ИЕ6 всё выстраивается просто в столбик. Можно как-нибуть повторить этот эффект для ИЕ6? / ие игнорирует white-space: nowrap; / то есть в ИЕ таблицы не выстраиваются в строчку.

Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#rr { white-space: nowrap; overflow:auto; width:1000px; background: #CCCCCC; }
#rr table { display: inline-block; white-space: normal; }
-->
</style>
</head>

<body>

<div id="rr">

<table width="200" border="1" bgcolor="#FFFFFF">
  <tr>
<td>
	  j tdy jtdy jtdy jdtyjdlk hkjnlk lnhn khkjn knkjner;j ne;rjkgn;n;en tnt;nrtk;jg nhekljrglerglebrglhberlberlhgbljer gljber luberig eyrbguyerugb erubgy ergr
</td>
  </tr>
</table>

<table width="200" border="1">
  <tr>
<td>
	  <p>rtj srtj srtj srtjsrgj sr</p>
</td>
  </tr>
</table>

<table width="200" border="1" bgcolor="#FFFFFF">
  <tr>
	<td> </td>
  </tr>
</table>

<table width="200" border="1">
  <tr>
	<td> </td>
  </tr>
</table>

<table width="200" border="1" bgcolor="#FFFFFF">
  <tr>
	<td> </td>
  </tr>
</table>
<table width="200" border="1">
  <tr>
	<td> </td>
  </tr>
</table>

<table width="200" border="1" bgcolor="#FFFFFF">
  <tr>
	<td> </td>
  </tr>
</table>

<table width="200" border="1">
  <tr>
	<td> </td>
  </tr>
</table>


</div>
</body>
</html>

Edited November 13, 2009 by PND

rus · November 13, 2009

На, держи:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.wrap {
overflow-x:scroll;
width:1000px;
float:left;
white-space:nowrap;
}
.wrap table {
display:inline;
background:#330033;
border:#CCCCCC;
border-collapse:collapse;
}
.wrap table td {
width:200px;
}
</style>
</head>
<body>
<div class="wrap">

<table>
<tr>
<td><img src="img.jpg"></td>
</tr>
</table>

<table>
<tr>
<td><img src="img.jpg"></td>
</tr>
</table>

<table>
<tr>
<td><img src="img.jpg"></td>
</tr>
</table>

<table>
<tr>
<td><img src="img.jpg"></td>
</tr>
</table>

<table>
<tr>
<td><img src="img.jpg"></td>
</tr>
</table>

<table>
<tr>
<td><img src="img.jpg"></td>
</tr>
</table>

<table>
<tr>
<td><img src="img.jpg"></td>
</tr>
</table>
</div>
</body>
</html>

Ой..., поспешил, в осле не пашет... щас посмотрим в чем дело.

UPD: поправил, должно везде работать.

Edited November 13, 2009 by rus

shvv · November 13, 2009

Как вариант:

 <!--[if lte IE 7]>
	<style type="text/css">

#rr { overflow-x:scroll;}
#rr table {  display: inline; white-space: pre; }
#rr table td {white-space: normal;}

</style> 
	<![endif]-->

rus · November 13, 2009

Как вариант:

 <!--[if lte IE 7]>
	<style type="text/css">

#rr { overflow-x:scroll;}
#rr table {  display: inline; white-space: pre; }
#rr table td {white-space: normal;}

</style> 
	<![endif]-->

Без хаков см. выше, только в 6 осле не проверял не знаю будет работать.

shvv · November 13, 2009

Без хаков см. выше, только в 6 осле не проверял не знаю будет работать.

В 6 работает, красиво.

PND · November 13, 2009

Спасибо, я пришёл к такому варианту:

#rr {  white-space: nowrap; width:1000px; overflow-x:auto; }

html>body #rr table { display: inline-block; white-space: normal; }

#rr table { display:inline }

Вроде проверил и всё работает, если найду косяки, обращусь к вашем rus, shvv вариантам. Спасибо. =)

Edited November 13, 2009 by PND

rus · November 13, 2009

Спасибо, я пришёл к такому варианту:
#rr {  white-space: nowrap; width:1000px; overflow-x:auto; }

html>body #rr table { display: inline-block; white-space: normal; }

#rr table { display:inline }
Вроде проверил и всё работает, если найду косяки, обращусь к вашем rus, shvv вариантам. Спасибо. =)

У тебя тут очень много лишнего и совершенно ненужного... в общем как хочешь.

Edited November 13, 2009 by rus

Sign In

Как сделать динамическое изменение ширины?

Question

PND

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

PND

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

shvv

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

shvv

Link to comment

Share on other sites

PND

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information