Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать scroll в ячейке таблицы ? / 8 сообщений из 8, страница 1 из 1
05.10.2012, 15:13
    #37985520
S_A_V_e
S_A_V_e
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать scroll в ячейке таблицы ?
Здравствуйте.

Не могу побороть разметку в html5. Есть таблица. В ячейку вложен div который должен отображать много текста и занимать всю высоту ячейки (у div height:100%). Размер таблицы по высоте 100% (не должна вылазить за экран). В элементе div должна отображаться прокрутка (overflow:auto). Вроде бы всё просто... Но scroll в div элементе не отображается. Причём не отображается если ставлю
Код: html
1.
<!DOCTYPE html>

. Если в то же примере ставлю
Код: html
1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

то всё работает именно так как надо. Прилагаю файлик с примером для html5 и html4 (в примере нужно поменять только DOCTYPE ).
Вот код для общей картины :
Код: 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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--<!DOCTYPE html>-->
<html>
<head>
    <title>html test</title>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            overflow: hidden;
        }

        table
        {
            border-width: 1px;
            border-style: outset;
            border-color: gray;
            margin: 0 auto;
            width: 100%;
            height: 100%;
        }

        td
        {
            border-width: 1px;
            border-style: inset;
            border-color: gray;
        }
    </style>
</head>
<body>
    <table>
        <tr style="height: 15%">
            <td >
                верхний
            </td>
        </tr>
        <tr style="height: 75%">
            <td>
                <div style="width: 100%; height: 100%; overflow: auto;">
                    куча текста куча текста куча текста куча текста куча текста куча текста куча текста куча 
                    ....
                  текста куча текста куча текста куча текста куча текста куча текста куча текста куча текста 
                  
                </div>
            </td>
        </tr>
        <tr style="height: 10%">
            <td >
                низ
            </td>
        </tr>

    </table>
</body>
</html>



Мне нужно добиться от разметки в html5 такого же точно поведения как в html4. Т.е. что бы в div появлялся scroll и таблица не вылазила за экран. Это удаётся сделать в html5 только устанавливая в div например height:600px. Но такое решение не подходит. Подскажите пожалуйста как это сделать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2012, 16:10
    #37985627
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать scroll в ячейке таблицы ?
S_A_V_e , твой макет луше таки сделать на ДИВах, тогда не будет таких проблем...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2012, 16:13
    #37985637
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать scroll в ячейке таблицы ?
Автор, ты забыл добавить, что это не работает в ie и ff, а в хроме и опере работает.

height нужно ставить у td, а не tr, тогда будет работать везде.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2012, 16:16
    #37985644
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать scroll в ячейке таблицы ?
S_A_V_e , так гораздо меньше тегов...

Код: 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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
#head {
	height: 15%;
	background-color: geen;
}
#content {
	height: 75%;
	background-color: blue;
}
#footer {
	height: 10%;
	background-color: silver;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='head'>
	верхний
</div>
<div id='content'>
	<div style="width: 100%; height: 100%; overflow: auto;">
		куча текста куча текста куча текста куча текста куча текста куча текста куча текста куча 
		....
	  текста куча текста куча текста куча текста куча текста куча текста куча текста куча текста 
	  
	</div>
</div>
<div id='footer'>
	низ
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2012, 16:16
    #37985646
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать scroll в ячейке таблицы ?
А хотя в лисе все равно не работает.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.10.2012, 17:42
    #37985807
S_A_V_e
S_A_V_e
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать scroll в ячейке таблицы ?
1. Решение с использованием div я находил. Но не хотелось бы отказываться от таблиц т.к. здесь просто пример , а реальная страничка имеет более сложную разметку и для неё таблицы очень хорошо подходят.

2. Прописывать height в td я пробовал. Результат тот же.

Неужели нет никакого способа заставить это работать не переделывая всю разметку с таблиц на div ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.10.2012, 08:38
    #37987465
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать scroll в ячейке таблицы ?
S_A_V_eНо не хотелось бы отказываться от таблиц
Если дело касается вопросов веры - я пас.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.02.2013, 17:01
    #38169898
ConstantIn
ConstantIn
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать scroll в ячейке таблицы ?
krvsa S_A_V_e , так гораздо меньше тегов...

Спасибо! То, что искал! Работает! И даже можно добавить вторую тоже прокручиваемую колонку в центре :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать scroll в ячейке таблицы ? / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 512ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448645]:
 0ms
get settings:
 10ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 189ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 46ms
get tp. blocked users:
 2ms
others: 223ms
total:  512ms
x
x
Закрыть


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