ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите, как сделать кроссбраузерно резиновую таблицу.
10 сообщений из 10, страница 1 из 1
Подскажите, как сделать кроссбраузерно резиновую таблицу.
    #36161082
smm
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
smm
Участник
Всем привет, уважаемые!

Вот борюсь с проблемкой...

Есть простенькая страничка
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<style type="text/css">
body,table{
	text: black;
	font-size: 10pt;	
	font-family: Arial;
	background-color: #FFCC66;
	margin:  0 ;
	padding:  0 ;
}
table,tr,td{
	border-color: # 000000 ;
	border: solid 1pt;
	margin:  0 ;
	padding:  0 ;
	cellpadding:  0 ;
	cellspacing:  0 ;
}
#d{
overflow:auto;
height:100pt;
}
</style>

<html>
 <body>
  <table border="1" height="100%">
   <tr height="50pt"><td>Title</td></tr>
   <tr><td>
    <div id="d">
     <table border="1" cellpadding="0" cellspacing="0">
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
     </table>
    </div>
   </td></tr>
  </table>
 </body>
</html>

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

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

Пока озадачился, что высоту дива, чтобы появился скроллбар нужно указывать в фиксированных единицах, а если в процентах, то высота строки растягивается на полную высоту всех данных.
...
Рейтинг: 0 / 0
25.08.2009, 10:26
| Ответить | Цитировать | Написать  
Подскажите, как сделать кроссбраузерно резиновую таблицу.
    #36162355
smm
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
smm
Участник
Коллеги!

Как делать-то?

Указанный код работает в IE при указании доктайпа "HTML 3.0 Strict" и указании в стиле для #d процента

Код: plaintext
1.
2.
3.
4.
#d{
overflow:auto;
height: 100 %;
}

Работает так, как надо.

Что для оперы и мозиллы нужно подкрутить?
...
Рейтинг: 0 / 0
25.08.2009, 17:26
| Ответить | Цитировать | Написать  
Подскажите, как сделать кроссбраузерно резиновую таблицу.
    #36163049
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
возможно я неправильно понял,но может стоит вместо
Код: plaintext
1.
<tr height="50pt">

написать размер у тэдэшки
Код: plaintext
1.
<td height="50pt">
...
Рейтинг: 0 / 0
26.08.2009, 09:05
| Ответить | Цитировать | Написать  
Подскажите, как сделать кроссбраузерно резиновую таблицу.
    #36163051
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
а блин...это ж размер у Title стоит...
...
Рейтинг: 0 / 0
26.08.2009, 09:06
| Ответить | Цитировать | Написать  
Подскажите, как сделать кроссбраузерно резиновую таблицу.
    #36163056
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
вот так)))
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
#d{
overflow:auto;
height: 99 %;
}
----------
<tr><td height= 99 %>
    <div id="d">
...
Рейтинг: 0 / 0
26.08.2009, 09:12
| Ответить | Цитировать | Написать  
Подскажите, как сделать кроссбраузерно резиновую таблицу.
    #36163077
smm
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
smm
Участник
В IE получается (в принципе и раньше получалось), а в мозилле нет.

Может кто-нибудь приведет мне пример работающий только в Mozilla FireFox или подскажет где глянуть?
...
Рейтинг: 0 / 0
26.08.2009, 09:25
| Ответить | Цитировать | Написать  
Подскажите, как сделать кроссбраузерно резиновую таблицу.
    #36163080
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
в фаерфоксе получается то,что я написал...проблема тока в том,что таблица не прицепляется к нижнему краю экрана
...
Рейтинг: 0 / 0
26.08.2009, 09:27
| Ответить | Цитировать | Написать  
Подскажите, как сделать кроссбраузерно резиновую таблицу.
    #36165321
smm
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
smm
Участник
Сейчас пробую это с помощью javascript реализовать, если получится выложу. А так в голове сидит следующая непонятка:
Если в HTML странице сидит строгий DOCTYPE (например HTML 3.0 Strict) и она правильно работает в IE, но неправильно в FF, то это косяк какого-то из браузеров, который несмотря на строгий DOCTYPE все равно вместо следования указанному стандарту добавляет какую-то отсебятину или тут что-то другое? Просто я полагал, что если указан строгий стандарт, а не режим совместимости, то в разных браузерах должно быть все одинаково.
...
Рейтинг: 0 / 0
27.08.2009, 09:20
| Ответить | Цитировать | Написать  
Подскажите, как сделать кроссбраузерно резиновую таблицу.
    #36166293
smm
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
smm
Участник
Вот пример с javascript все работает как надо. Но все-таи хотелось бы узнать можно ли как-то без javascript это делать с указанием DOCTYPE.

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<script type="text/javascript">
function q(){
	ElasticHeight("d1","d3", 10 , 100 );
}
//Определение высоты эластичного объекта
function ElasticHeight(idElasticObject,idFooterObject,Correction,MinHeight){
	//Определение координаты Top растягиваемого объекта
	var inputObj=document.getElementById(idElasticObject);
	var TopElasticObject = inputObj.offsetTop;
	while ((inputObj = inputObj.offsetParent) != null) {
		TopElasticObject += inputObj.offsetTop;
	}
	//Расчет высоты вьюпорта(размер окна вывода в браузере, может учитывать или нет линейку прокрутки)
	var ViewPortH=window.screen.height* 0 . 7 ;
	if (window.innerHeight){
		ViewPortH=window.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight) {
		ViewPortH=document.documentElement.clientHeight;
	}
	else if (document.body.clientHeight) {
		ViewPortH=document.body.clientHeight;
	}
	//Определим высоту нижнего элемента
	var HeightFooterObject= 0 ;
	if (document.getElementById(idFooterObject)){
		HeightFooterObject=document.getElementById(idFooterObject).offsetHeight;
	}
	var x=ViewPortH-TopElasticObject-HeightFooterObject-Correction;
	if (x<MinHeight){
		x=MinHeight;
	}
	document.getElementById(idElasticObject).height=x;
}
</script>

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

body,table{
	text: black;
	font-size: 10pt;	
	font-family: Arial;
	background-color: #FFCC66;
}

table,tr,td{
	vertical-align:top;
	border: solid 1px # 000000 ;
	margin:  0 ;
	padding:  0 ;
	cellpadding:  0 ;
	cellspacing:  0 ;
}

#d{
overflow:scroll;
height: 100 %;
}
</style>

<html>
 <body onresize="q();" onload="q();">
  <table border="1">
   <tr><td id="d2" height="50px">Title</td></tr>
   <tr><td id="d1" height="1px">

    <div id="d">
     <table border="1" cellpadding="0" cellspacing="0" height="100%">
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>

      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>

      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>

      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>

      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>

      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>

      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>

      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>

      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>

      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>
      <tr><td>qwerty</td></tr>

      <tr><td>qwerty</td></tr>
     </table>
    </div>
   </td></tr>
   <tr><td id="d3" height="25px">END</td></tr>
  </table>
 </body>
</html>

Проверял в IE и FF
...
Рейтинг: 0 / 0
27.08.2009, 14:51
| Ответить | Цитировать | Написать  
Подскажите, как сделать кроссбраузерно резиновую таблицу.
    #36173947
smm
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
smm
Участник
Всем привет!

Все это время пытался сделать правильный скроллинг без яваскрипта, но ничего не выходит :(

Делаю вывод, что кроссбраузерно получается только со скриптом.

Тему, наверное, можно закрыть.
...
Рейтинг: 0 / 0
02.09.2009, 09:11
| Ответить | Цитировать | Написать  
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите, как сделать кроссбраузерно резиновую таблицу.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=36163051&tid=1454319]:
 0ms
get settings:
 8ms
get forum list:
 21ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 168ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 71ms
get tp. blocked users:
 2ms
others: 215ms
total:  506ms
созд. / загр.: 506ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]