Как прокрутить только тело таблицы?
Привет всем. Помогите с такой проблемой.
Нужно вывести на страницу блок информации, состоящий из постоянной и переменной частей. Грубо говоря, некий стандартный текст и после него таблица с заголовком и с переменным числом информационных строк. Неприятность в том, что для отображения всего этого дела выделен кусок экрана с фиксированной высотой, и изменять эту высоту нельзя. (Не "нежелательно", а именно "нельзя"). А количество информации при выводе обычно такое, что этой высоты не хватит, и понадобится прокрутка. Как сделать так, чтобы при необходимости прокручивался весь блок - это я разобрался (style="overflow:auto;" на div, выделенный для моего блока). Но хочется сделать покрасивее - чтобы постоянная часть оставалась на месте, а прокручивалось только тело таблицы. Почему-то аналогичный стиль на тег tbody не работает. Есть какие идеи? Заранее спасибо. |
и не будет работать.
Делай два блока один с прокруткой, другой нет, возможно я не понял в чём соль. Напиши понятнее и + код. А про то что фиксированные размеры я понял=) |
Нужно нечто вроде такого:
<div id="..." style="max-height:300px; width:970px"> <table ... > <thead ...> <tr> <TH ...>...</TH> <th ...>...</th> ... </tr> </thead> <tbody ...> /* переменная часть, которую надо прокрутить */ </tbody> </table> |
Цитата:
<table ... > <thead ...> <tr> <TH ...>...</TH> <th ...>...</th> ... </tr> </thead> <tbody ...> <tr> <td> Вставь тут ещё див с overflow: auto; </td> </tr> </tbody> </table> |
Вот прямо так внутрь <td>...</td> вставить? А смысл? Это же оторвет заголовки колонок от содержимого...
|
Почему не тупо так:
<style type="text/css">table,td,th,tr{border:1px solid #ddf;border-collapse:collapse;}</style>
<table style="height:100px; width:940px">
<tr>
<th>1111111</th>
<th>2222222</th>
</tr>
</table>
<div style="height:200px; width:970px;overflow:auto;" >
<table style="width:940px;">
<tr>
<td>1<br><br><br><br><br><br></td>
<td>2<br><br><br><br><br><br></td>
</tr>
<tr>
<td>3<br><br><br><br><br><br></td>
<td>4<br><br><br><br><br><br></td>
</tr>
<tr>
<td>5<br><br><br><br><br><br></td>
<td>6<br><br><br><br><br><br></td>
</tr>
</table>
</div>
|
<style type="text/css">table,td,th,tr{border:1px solid #ddf;border-collapse:collapse;}</style>
<table style="height:100px; width:940px">
<tr>
<th>1111111</th>
<th>2222222</th>
</tr>
</table>
<div style="height:200px; width:970px;overflow:auto;" >
<table style="width:940px;">
<tr>
<td>1sa das вафыва фыва asd fasd fasfd фыав as вафыва фыва фыва as вафы ваф sda sdf<br><br><br><br><br><br></td>
<td>2<br><br><br><br><br><br></td>
</tr>
<tr>
<td>3<br><br><br><br><br><br></td>
<td>4<br><br><br><br><br><br></td>
</tr>
<tr>
<td>5<br><br><br><br><br><br></td>
<td>6<br><br><br><br><br><br></td>
</tr>
</table>
</div>
и? |
Извращённой задаче - извращённое исполнение) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
table,td,th,tr{border:1px solid #ddf;border-collapse:collapse;}
td div {margin-top:-104px;margin-left:-2px;height:100px;position:absolute;border-left:1px solid #ddf;}
</style>
</head>
<body>
<div style="width:938px;height:100px;border:1px solid #ddf;background:#dfd"></div>
<div style="width:970px;height:200px;overflow:auto;">
<table style="width:940px;">
<tr>
<td><div>111111</div>1111111111111111111<br><br><br><br><br><br></td>
<td><div>222222</div>222222222<br><br><br><br><br><br></td>
</tr>
<tr>
<td>3<br><br><br><br><br><br></td>
<td>4<br><br><br><br><br><br></td>
</tr>
<tr>
<td>5<br><br><br><br><br><br></td>
<td>6<br><br><br><br><br><br></td>
</tr>
</table>
</div>
</body>
</html>
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 14:47. |