VPF::Скролл в таблице - Форум программистов

PeReZ

Дата 10.11.2005, 00:23 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Подскажите плз. как сделать скрол в таблице HTML?!

2man

Дата 10.11.2005, 02:15 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Комодератор
Сообщений: 2007
Регистрация: 6.5.2005
Где: Нижние Чигири

Репутация: 1
Всего: 71

Обсуждалось уже:

Код


<textarea name="Name" rows=5 cols=20 wrap="off">текст</textarea>

--------------------

Быстро поднятое - упавшим не считаеся

DEER

Дата 10.11.2005, 10:38 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

Репутация: 2
Всего: 13

а можно в ячейку запихать DIV

Код


<td>
 <DIV ID=oDiv STYLE="width: 200px; height: 200px; overflow: auto;">
  тут, если много текста , то будет скрол
 </DIV>
</td>

--------------------

sugee

Дата 15.11.2005, 12:01 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: 3
Всего: 4

Случайно заглянул и вдруг понял что мне свю жизнь была нужна именно такая чтука!!!
Добавлено @ 12:01
smile

slider82

Дата 12.2.2008, 14:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 22.1.2007

Репутация: нет
Всего: нет

не пойму почему у меня в ИЕ не работает скролл, вот код:

Код


<style type="text/css">
.layer {
 overflow-x: auto;
}
</style>
<table width="100%"><tr>
<td>11111111111111</td>
<td width="70%">
    <div class="layer">
    <img src="http://img.photo.mail.ru/images/mail=tarantino06.75=44=p-702.jpg" width= "1500" height="100">
    </div>
</td></tr></table>

bars80080

Дата 12.2.2008, 15:31 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ширину установи

Код


<style type="text/css">
.layer { width: 200px;
 overflow-x: auto;
}
</style>
<table width="100%"><tr>
<td>11111111111111</td>
<td width="70%">
    <div class="layer">
    <img src="http://img.photo.mail.ru/images/mail=tarantino06.75=44=p-702.jpg" width= "1500" height="100">
    </div>
</td></tr></table>

slider82

Дата 12.2.2008, 15:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 22.1.2007

Репутация: нет
Всего: нет

Цитата(bars80080 @ 12.2.2008, 15:31)

ширину установи

В том то и дело ширина фиксированная не нужна, резиновый дизайн...
без таблицы прекрасно работает, а вот в таблице...
Но без нее не куда smile

Это сообщение отредактировал(а) slider82 - 12.2.2008, 15:37

bars80080

Дата 12.2.2008, 15:55 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Код


<style type="text/css">
.layer { width: 100%; overflow-x: auto; }
.qw { width: 50%; background: #ccccff; }
</style>
<table width="100%" bgcolor="#cccccc"><tr>
<td>11111111111111</td>
<td class="qw">
    <div class="layer">
    <img src="http://img.photo.mail.ru/images/mail=tarantino06.75=44=p-702.jpg" width="1500" height="100" align="left">
    </div>
</td></tr></table>

будет тебе счастье

slider82

Дата 12.2.2008, 16:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 22.1.2007

Репутация: нет
Всего: нет

А другого решения нет? в смысле, у картинки не ставить align="left"...
Потому что то, то что внутри дива я не могу контролировать...

bars80080

Дата 12.2.2008, 16:32 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

какая-то у тебя бесконтрольная вёрстка получается
пропиши ещё:

Код

.layer img { float: left; }

или вставь ещё один див, внутри которого будет находится layer, или рядышком в ячейке

или тогда уж приводи и код полный, и идею которую ты хочешь мне телепатировать...

slider82

Дата 12.2.2008, 17:05 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 22.1.2007

Репутация: нет
Всего: нет

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

Cosmologist

Дата 12.2.2008, 22:16 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 53
Регистрация: 13.8.2006

Репутация: нет
Всего: 0

такая же проблема - есть ячейка/блок, в нем еще блок с большим количеством текста(overflow:auto) - в фаерфоксе все нормально отображается - появляются скроллы, в ie скроллы не появляются, а растягивается родительский элемент. Также не могу у родительского элемента задать фиксированную велечину.
Пример проблемы здесь

Помогите пожалуйста решить эту задачку, а то у самого знаний не хватает smile

...

bars80080

Дата 13.2.2008, 09:47 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ну так почитайте, что написано в этой теме, примените те же настройки css
в частности вот здесь задаётся фиксированная ширина

Код

.layer { width: 200px; overflow-x: auto; }

а там уже отписывайте, что да как делали и какие эффекты наблюдались
с кодом пожалуйста

Cosmologist

Дата 13.2.2008, 19:21 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 53
Регистрация: 13.8.2006

Репутация: нет
Всего: 0

Цитата(bars80080 @ 13.2.2008, 09:47)

Код

.layer { width: 200px; overflow-x: auto; }

а там уже отписывайте, что да как делали и какие эффекты наблюдались
с кодом пожалуйста

ну с фиксированной шириной неинтересно, интересней когда она в процентах задана.
Делал по твоему примеру - все равно не срабатывает.
А вот и код

Код


.dp-highlighter {
    background-color:#E7E5DC;
    font-family:"Consolas","Courier New",Courier,mono,serif;
    font-size:12px;
    margin:18px 0pt !important;
    max-height:350px;
    overflow-x:auto;
    padding-top:1px;
    width:99%;
}

<td style="width: 50%;">
<div class="dp-highlighter">
    <div class="bar">
        <div class="tools">
        Здесь все норм
        </div>
    </div>
    <ol start="1" class="dp-c">
        <li class="alt">Длинная строчка 1</li>
        <li class="">Длинна строчка 2</li>
        ...
        <li class="alt">Длинная строчка N-1</li>
        <li class="">Длинная строчка N</li>
    </ol>
    </div>
</td>

Код соответственно упрощен, а фулл версию можете просмотреть по ссылке в моем предыдущем посте.
Надеюсь на Вашу помощь!

bars80080

Дата 14.2.2008, 10:31 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

а что мешает сделать так:

Код


<style>
.as { width: 50%; }
.dp-highlighter {
    background-color:#E7E5DC;
    font-family: "Consolas","Courier New",Courier,mono,serif;
    font-size: 12px;
    margin: 18px 0pt !important;
    max-height: 350px;
    overflow-x:auto;
    padding-top: 1px;
    width: 99%; 
}
.dp-c { float: left; background: #ffffcc; }
.dp-c li { width: 1000px; }
</style>
<table class="as"><tr><td></td>
<td style="width: 50%;">
<div class="dp-highlighter">
    <div class="bar">
        <div class="tools">
        Çäåñü âñå íîðì
        </div>
    </div>
    <ol start="1" class="dp-c">
        <li class="alt">Äëèííàÿ ñòðî÷êà 1 qqqqqqqqqqqqqqqw wwwwwwwwwwwwqqqqqqqqqq   wqwe</li>
        <li class="">Äëèííà ñòðî÷êà 2 weiweo we; ;erre wle kle erklwlekrfwlekf l lkrefwle</li>
        ...
        <li class="alt">Äëèííàÿ ñòðî÷êà N-1</li>
        <li class="">Äëèííàÿ ñòðî÷êà N weqwe we rqwoierqwe rqowierqwierqwoerqower qwoerwe</li>
    </ol>
    </div>
</td>
</tr></table>

Cosmologist

Дата 15.2.2008, 18:18 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 53
Регистрация: 13.8.2006

Репутация: нет
Всего: 0

2bars80080 - спасибо помогло!
Ключевой параметр - float:left;
Единственное что возник следующий косяк, опять же в ие - распозиционирование блока .bar и ol - прикладываю скрин.
Попробовал поиграться с параметрами - не помогло...
Опять же надеюсь на твою помощь smile

Это сообщение отредактировал(а) Cosmologist - 15.2.2008, 18:20

Присоединённый файл ( Кол-во скачиваний: 8 )

shbug1.jpg 74,74 Kb

bars80080

Дата 15.2.2008, 18:44 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ну, честно говоря, над кодом думать щас не буду, пятницо как никак

могу посоветовать специально для ИЕ ввести сдвиг

что-то вроде

Код


* html .dp-c { position: relative; left: -50px; }

50px - или сколько там надо
не поможет relative, поменяй на absolute, но при этом вокруг ol нужно див положить, которому присвоить position: relative, либо он у тебя уже есть, тогда к нему

короче вёрстка - сродни искусству, как найдёшь приемлемые варианты, так и станешь юзать только их...

Cosmologist

Дата 15.2.2008, 19:34 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 53
Регистрация: 13.8.2006

Репутация: нет
Всего: 0

все равно в ие траблы, но спасибо - траблы видимо решаемы, только в css надо бы получше разбиратсья.
Вопрос такой - можешь подправить на выходных код так, чтобы в фаерфоксе, ие и опере все смотрелось нормально, и подправить относительно страницы сайта, а не упрощенного примера.
Ну не за так конечно же smile

, отпиши сюда как решишь.

slider82

Дата 15.2.2008, 23:11 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 22.1.2007

Репутация: нет
Всего: нет

Цитата(bars80080 @ 12.2.2008, 16:32)

или вставь ещё один див, внутри которого будет находится layer

еще раз спасибо bars80080, вот как я решил проблему с ИЕ...

Код


<style type="text/css">
.layer { width: 100%; overflow-x: auto; }
.qw { width: 50%; background: #ccccff; }
.sub { float:left;}<!-- ADD -->
</style>
<table width="100%" bgcolor="#cccccc"><tr>
<td>11111111111111</td>
<td class="qw">
    <div class="layer">
      <div class="sub"><!-- ADD -->
    <img src="http://img.photo.mail.ru/images/mail=tarantino06.75=44=p-702.jpg" width="1500" height="100">
        </div>
        <br clear="all" style="line-height:1px;"><!-- чтобы отменить обтекание заданное в sub -->
    </div>
</td></tr></table>

bars80080

Дата 18.2.2008, 10:31 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Cosmologist, понятие выходные и это слово на три буквы ("код") не совместимы, да и конкретно править желания нет (с налёта не получилось)

но могу сообщить тебе интересную новость, вот если копирнуть код, что у тебя висит на странице, но без css-таблицы, она у тебя осталась на ссылке, то наблюдается интересный эффект, что окно ровно такой ширины, какой нужно

следовательно, нужно заново отстроить стили, начиная с обработки под код и постепенно добавляя прорисовки

Cosmologist

Дата 18.2.2008, 20:02 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 53
Регистрация: 13.8.2006

Репутация: нет
Всего: 0

2 bars80080 - я тебя понял, спасибо! Буду разбираться или искать человека, который поможет!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »