Делаю небольшую страничку, содержащую три блока:
слева сверху фиксированный блок кнопок
справа сверху таблица с колонками фиксированной ширины, высотой равной блоку кнопок и по ширине занимающая все оставшееся свободное место в окне браузера
внизу таблица по ширине занимающая все оставшееся свободное место в окне браузера
Проблема в следующем:
Таблица, расположенная справа сверху в эксплорере и фоксе растягивается по ширине, пока не вместит все данные. В опере скролинг работает, но ширина столбцов минимальная. Эксплорер тоже забивает на ширину столбцов.
Перечитал множество примеров на эту тему, но ни один не помог. Може кто знает как это можно сделать?
PS Пример кода есть в приложенном файле
HTML:
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color:#666666">
<table width="100%">
<tr>
<td style="width:450px; height:200px">
<div style="width:450px">
<table style="width:450px; height:100%; border:0px">
<tr>
<td colspan="2">
<span style="float:left;">
Информация<br/>
Еще информация
</span>
</td>
</tr>
<tr>
<td style="width:300px; height:80px">
<input type="button" value="Кнопка 1" style="width:300px; height:80px">
</td>
<td width="150px">
<table style="width:150px; height:80px">
<tr>
<td>
<input type="button" value="Кнопка 2" style="width:140px; height:40px">
</td>
</tr>
<tr>
<td>
<input type="button" value="Кнопка 3" style="width:140px; height:40px">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Кнопка 4" style="width:447px; height:40px">
</td>
</tr>
</table>
</div>
</td>
<td class="scrollContent">
<div class="tableContainer">
<table style=" width:100%; height:100%">
<tbody class="scrollContent">
<tr class="scrollContent">
<td class="scrollContent">
QWERTY
</td>
... повторяется 10 раз ...
<td class="scrollContent">
QWERTY
</td>
</tr>
<tr class="scrollContent">
<td class="scrollContent">
QWERTY
</td>
... повторяется 10 раз ...
<td class="scrollContent">
QWERTY
</td>
</tr>
<tr class="scrollContent">
<td class="scrollContent">
123456
</td>
... повторяется 10 раз ...
<td class="scrollContent">
123456
</td>
</tr>
<tr class="scrollContent">
<td class="scrollContent">
QQQ- 123123 <br>
QQQ- 123123 <br>
QQQ- 123123 <br>
QQQ- 123123 <br>
QQQ- 123123 <br>
</td>
... повторяется 10 раз ...
<td class="scrollContent">
QQQ- 123123 <br>
QQQ- 123123 <br>
QQQ- 123123 <br>
QQQ- 123123 <br>
QQQ- 123123 <br>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
<table class="mainTable">
<tr>
<td width="33%" valign="top">
<h3 align="center" style="background-color:#999999">Первй столбец</h3>
<table border="0" width="100%">
</table>
</td>
<td width="33%" valign="top">
<h3 align="center" style="background-color:#999999">Второй столбец</h3>
<table border="0" width="100%">
</table>
</td>
<td width="33%" valign="top">
<h3 align="center" style="background-color:#999999">Третий столбец</h3>
<table border="0" width="100%">
</table>
</td>
</tr>
</table>
</body>
</html>
CSS:
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.
/* CSS Document */
.mainTable {
width: 100 %;
background-color:#CCCCCC;
border:0px;
}
div.tableContainer {
clear: both;
border: 5px solid #BBB;
height: 220px;
overflow: auto;
width: 100 %;
height: 100 %;
}
html>body tbody.scrollContent {
display: block;
width: 100 %;
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border: none;
padding: 2px 3px 3px 4px;
}
tbody.scrollContent tr.alternateRow td {
background:# 999999 ;
border: none;
padding: 2px 3px 3px 4px;
}
html>body tbody.scrollContent td {
background:# 999999 ;
width:100px;
min-width:100px;
}
html>body tbody.scrollContent td + td {
background:# 999999 ;
width:100px;
min-width:100px;
}
html>body tbody.scrollContent td + td + td {
background:# 999999 ;
width:100px;
min-width:100px;
}
