15.04.2010, 14:00
|
|
Аспирант
|
|
Регистрация: 26.03.2010
Сообщений: 55
|
|
|
Как прокрутить только тело таблицы?
Привет всем. Помогите с такой проблемой.
Нужно вывести на страницу блок информации, состоящий из постоянной и переменной частей. Грубо говоря, некий стандартный текст и после него таблица с заголовком и с переменным числом информационных строк. Неприятность в том, что для отображения всего этого дела выделен кусок экрана с фиксированной высотой, и изменять эту высоту нельзя. (Не "нежелательно", а именно "нельзя"). А количество информации при выводе обычно такое, что этой высоты не хватит, и понадобится прокрутка. Как сделать так, чтобы при необходимости прокручивался весь блок - это я разобрался (style="overflow:auto;" на div, выделенный для моего блока). Но хочется сделать покрасивее - чтобы постоянная часть оставалась на месте, а прокручивалось только тело таблицы. Почему-то аналогичный стиль на тег tbody не работает.
Есть какие идеи?
Заранее спасибо.
|
|
15.04.2010, 14:08
|
 |
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
|
и не будет работать.
Делай два блока один с прокруткой, другой нет, возможно я не понял в чём соль.
Напиши понятнее и + код. А про то что фиксированные размеры я понял=)
__________________
.
|
|
15.04.2010, 14:19
|
|
Аспирант
|
|
Регистрация: 26.03.2010
Сообщений: 55
|
|
Нужно нечто вроде такого:
<div id="..." style="max-height:300px; width:970px">
<table ... >
<thead ...>
<tr>
<TH ...>...</TH>
<th ...>...</th>
...
</tr>
</thead>
<tbody ...>
/* переменная часть, которую надо прокрутить */
</tbody>
</table> |
|
15.04.2010, 15:47
|
|
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
Сообщение от GRIG
|
|
Нужно нечто вроде такого:
|
<div id="..." style="max-height:300px; width:970px">
<table ... >
<thead ...>
<tr>
<TH ...>...</TH>
<th ...>...</th>
...
</tr>
</thead>
<tbody ...>
<tr>
<td>
Вставь тут ещё див с overflow: auto;
</td>
</tr>
</tbody>
</table>
__________________
.
|
|
15.04.2010, 16:08
|
|
Аспирант
|
|
Регистрация: 26.03.2010
Сообщений: 55
|
|
|
Вот прямо так внутрь <td>...</td> вставить? А смысл? Это же оторвет заголовки колонок от содержимого...
|
|
15.04.2010, 21:14
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,589
|
|
Почему не тупо так:
<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>
|
|
15.04.2010, 23:01
|
 |
Профессор
|
|
Регистрация: 15.12.2009
Сообщений: 742
|
|
<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>
и?
__________________
Настоящий программист думает и осознает сам решение задачи, а не копирует другие мысли, не осознавая их (c)
Относись к человеку так же, как хотелось бы отношения к себе (с)
Все нужно там, где оно нужно, а все не нужно нигде (с) Gozar
B~Vladi: А кто такой JavaScript стрелок?! micscr: это тот, кто не jQuery танкист.
Программы становятся медленнее быстрее, чем компьютеры становятся быстрее (с) Никлаус Вирт |
|
16.04.2010, 02:31
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,589
|
|
Извращённой задаче - извращённое исполнение) :
<!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>
|
|
16.04.2010, 10:41
|
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
|
Сообщение от Aetae
|
|
Извращённой задаче - извращённое исполнение) :
|
Да нормальная задача, вполне даже стандартная. Я даже видел где-то решение, но где -- не помню, а копаться щас неохота. |
|
16.04.2010, 10:54
|
|
Аспирант
|
|
Регистрация: 26.03.2010
Сообщений: 55
|
|
|
Сообщение от Aetae
|
Почему не тупо так:
<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>
|
Не годится. Если посмотреть на результат этого кода, то невооруженным глазом видно, что вертикальная граница между ячейками "1111111" и "2222222" визуально не совпадает с вертикальной границей между ячейками "1" и "2". А хочется достичь полного совпадения, причем вне зависимости от того, что записано в ячейках. |
|
|
|
