VPF::Верстка таблицы с прокруткой и переносом строк

Ripper

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

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

Загрузка ...

Lonely soul...

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

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

Добрый вечер
Очень прошу помочь с задачей, уже мозг плавится от всех этих css свойств

Нужно сверстать таблицу фиксированной ширины и высоты, чтобы колонки её так же были фиксированной ширины. Должна быть полоса прокрутки по оси y. Строки в ячейках таблицы, в случае если они не помещаются должны переноситься. Шапка таблицы стоит на месте

У меня максимум что получилось это сделать без прокрутки. Но я уже весь запутался в word-break, word-wrap, fixed layout и т.п. все никак не выходит. Нашел пример для для фиксации шапки и прокрутки, но не получается сделать перенос слов.

для IE в принципе не обязательно, нужно чтобы в хроме и фф работало, ну еще желательно сафари и опера.
Вот что нашел:

Код


#myList { /* айди дива в котором размещена таблица*/
    height: 285px;
    overflow-y: auto;
    width: 756px
}

#myList .scrollContent { /* класс для таблицы самой*/
    display: block;
    height: 262px;
    overflow-y: auto;
    width: 100%
}

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

"Он знает: надо смеяться над тем, что тебя мучит, иначе не сохранишь равновесия, иначе мир сведет тебя с ума" - Над кукушкиным гнездом

ksnk

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

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Цитата(Ripper @ 6.9.2012, 18:01

)

Нашел пример для для фиксации шапки и прокрутки, но не получается сделать перенос слов

Что за пример?

Я такое верстаю двумя таблицами. Одна изображает заголовки, вторая помещается в диве фиксированной ширины со скроллером. Чтобы ширИны столбиков во всех таблицах совпадали - используется table-layout:fixed и явное указание ширины столбцов.

Что-то вроде

Код


<style>
.tablewithheader table {
   width:100%;table-layout:fixed;
}
.tablewithheader table td,.tablewithheader table th{
   text-align:left;
}
.tablewithheader div.container {
    height:100px;
    overflow-y:auto;
}
</style>

<div class="tablewithheader">
<table >
    <col width="20"><col width="100"><col width="30%"><col ><col width="20">
    <tr>
    <th>|<th>Name<th>family<th>unit designation<th>|</td>
</table>
<div class="container">
    <table>
        <col width="20"><col width="100"><col width="30%"><col ><col width="20">
    
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        <tr><td>|<td>lwkejwl<td>.nlwnel<td>sddzwfer<td>|</tr>
        
    </table>
</div>
</div>

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Ripper

Дата 7.9.2012, 01:26 (ссылка)

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

Загрузка ...

Lonely soul...

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

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

а вот как в твоем примере в случае если строка слишком длинная сделать перенос строки?
Пример не сохранил, где то в гугле нашел табличку. Просто проблем больше с переносом строк

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

ksnk

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

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Как-то с переносом, обычно, проблем нет. Само в ячейках все переносится. Приходится с этим самым переносом бороться.

отсюда
http://forum.htmlbook.ru/index.php?showtopic=13380

Код


p {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, начиная с 1999 года */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Если сильно большое слово - его нужно разбивать на кусочки вручную. Например так

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

olldman

Дата 13.9.2012, 16:56 (ссылка)

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

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

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

Так, не?

ksnk

Дата 13.9.2012, 17:09 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Если не интересует совместимость с IE7 и IE6 - то можно и так. Там еще и размер скроллера не учитывается, так что заголовки смещены относительно содержимого таблицы. Видно в Хроме.

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

olldman

Дата 13.9.2012, 17:12 (ссылка)

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

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

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

Ну да, но ТС писал - "для IE в принципе не обязательно", потому так и предложил.

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