ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Ограничение вывода таблицы средствами html и css
12 сообщений из 12, страница 1 из 1
Ограничение вывода таблицы средствами html и css
    #38358882
Scar714
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scar714
Гость
Доброго времени суток!

Подскажите, как можно ограничить вывод широкой таблицы, чтобы не поплыл дизайн? Никак не могу это сделать. Если таблица не широкая и экран довольно большой и все умещается, то смотрится все хорошо, но как только таблица увеличивается в ширину (добавляются новые столбцы), то все рушится. Проблему решил только установкой width на класс .desc, но это не решение, так как сайт резиновый.

Код: 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.
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
  </head>

  <body>
    <div id="sidebar" style="display: block; position: fixed; width: 240px; height: 100%; background-color: blue;">
    </div>
    <div id="content" style="margin-left: 240px; position: relative;">
      <div id="map" style="position: relative; background-color: red; overflow: hidden; height: 400px; width: 100%;">
      </div>
      <div id="bookmarks" style="top: 400px; width: 100%; background-color: green;">
        <ul id="bookmarks-list" style="list-style-type: none;">
          <li class="bookmark" style="border: 1px solid black;">
            <div class="desc" style="float: left;">
              <div>Заголовок</div>
              <div style="overflow: auto;">
                <table>
                  <tbody>
                    <tr>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="del" style="float: right; width: 80px;">Удалить</div>
            <div class="clear" style="clear: both;"></div>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>



А заодно может подскажите как центрировать по вертикали и горизонтали текст внутри блока класса .del?
...
Рейтинг: 0 / 0
07.08.2013, 21:20
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38359534
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Scar714как центрировать по вертикали и горизонтали текст внутри блока
Используй табличку для таких дел, будет работать везде...
...
Рейтинг: 0 / 0
08.08.2013, 13:02
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38360030
Denis1991
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Denis1991
Участник
Может попробовать не просто width а использовать max-width?
...
Рейтинг: 0 / 0
08.08.2013, 17:05
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38360068
Denis1991
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Denis1991
Участник
Scar714 как центрировать по вертикали и горизонтали текст внутри блока класса .del?

text-align: center;
...
Рейтинг: 0 / 0
08.08.2013, 17:25
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38360071
Denis1991
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Denis1991
Участник
Лучше перенести все стили в отдельный файл
...
Рейтинг: 0 / 0
08.08.2013, 17:26
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38360074
Denis1991
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Denis1991
Участник
Scar714<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Здесь нужно только charset=utf-8". HTML5
...
Рейтинг: 0 / 0
08.08.2013, 17:28
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38360107
Scar714
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scar714
Гость
krvsaИспользуй табличку для таких дел, будет работать везде...
А чуть подробнее можно? Для чего? display: table-cell не подойдет?

Denis1991Может попробовать не просто width а использовать max-width?
А что указывать в значении? Процент? Поплывет. Пиксели и прочее нельзя так как сайт резиновый.

Denis1991text-align: center;
Центрирует только по горизонтали. По вертикали - нет.

Denis1991Лучше перенести все стили в отдельный файл
Это понятно, сюда запихнул чтобы не куча файлов было.

Denis1991Здесь нужно только charset=utf-8". HTML5
Да это просто пример, но приму к сведению.
...
Рейтинг: 0 / 0
08.08.2013, 17:57
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38360412
Denis1991
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Denis1991
Участник
Центрирует только по горизонтали. По вертикали - нет.;

Тогда попробуйту текст вставит в тег <a></a> а его уже позиционировать на сайте
...
Рейтинг: 0 / 0
09.08.2013, 09:22
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38360416
Denis1991
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Denis1991
Участник
попробуйте*
...
Рейтинг: 0 / 0
09.08.2013, 09:23
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38360532
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Scar714Для чего? display: table-cell не подойдет?
Если выглядит как собака, лает как собака - таки может быть это и еть собака?
Но решать тебе...
...
Рейтинг: 0 / 0
09.08.2013, 11:01
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38361679
Scar714
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scar714
Гость
Если кому интересно, то данные задачи в итоге решил вот так:
Код: 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.
<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div id="sidebar" style="display: block; position: fixed; width: 240px; height: 100%; background-color: blue;">
    </div>
    <div id="content" style="margin-left: 240px; position: relative;">
      <div id="map" style="position: relative; background-color: red; overflow: hidden; height: 400px; width: 100%;">
      </div>
      <div id="bookmarks" style="top: 400px; background-color: green;">
        <ul id="bookmarks-list" style="list-style-type: none;">
          <li class="bookmark" style="position: relative; border: 1px solid black;">
            <div class="desc" style="margin-right: 80px;">
              <div>Заголовок</div>
              <div style="overflow: auto;">
                <table>
                  <tbody>
                    <tr>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="del" style="position: absolute; top: 0;  bottom: 0; right: 0; width: 80px;">
              <div style="display: table; width: 100%; height: 100%;">
                <div style="display: table-cell; vertical-align: middle; text-align: center;">Удалить</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>



Если у кого-то есть улучшения и предложения по модификации данного кода с удовольствием рассмотрю их.
Спасибо всем, кто пытался помочь!
...
Рейтинг: 0 / 0
10.08.2013, 00:15
| Ответить | Цитировать | Написать  
Ограничение вывода таблицы средствами html и css
    #38362193
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Scar714,

если Текст разной длины будет большой, да еще из длинных слов, то текст будет наползать друг на друга. Лучше в свойствах ячейки указать переносы:
Код: css
1.
2.
3.
4.
5.
td {
  white-space:pre-wrap;
  word-wrap:break-word;
  word-break:break-all;
}

 
Ваш слегка измененный пример
Код: 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>
<title>Подсветка строк и столбцов в таблице</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
td {
	white-space:pre-wrap;
	word-wrap:break-word;
	word-break:break-all;
}
</style>
</head>
<body>
    <div id="sidebar" style="display: block; position: fixed; width: 240px; height: 100%; background-color: blue;">
    </div>
    <div id="content" style="margin-left: 240px; position: relative;">
      <div id="map" style="position: relative; background-color: red; overflow: hidden; height: 400px; width: 100%;">
      </div>
      <div id="bookmarks" style="top: 400px; background-color: green;">
        <ul id="bookmarks-list" style="list-style-type: none;">
          <li class="bookmark" style="position: relative; border: 1px solid black;">
            <div class="desc" style="margin-right: 80px;">
              <div>Заголовок</div>
              <div style="overflow: auto;">
                <table>
                  <tbody>
                    <tr>
                      <td><div style="width: 150px;"><span>ПерваяКолонкаПерваяКолонкаПерваяКолонка</span></div></td>
                      <td><div style="width: 150px;"><span>Вторая колонка Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                      <td><div style="width: 150px;"><span>Текст разной длины</span></div></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="del" style="position: absolute; top: 0;  bottom: 0; right: 0; width: 80px;">
              <div style="display: table; width: 100%; height: 100%;">
                <div style="display: table-cell; vertical-align: middle; text-align: center;">Удалить</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>


З.Ы. Первой строкой в HTML документе надо указывать DOCTYPE , иначе потом могут быть проблемы.
...
Рейтинг: 0 / 0
11.08.2013, 11:07
| Ответить | Цитировать | Написать  
12 сообщений из 12, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Ограничение вывода таблицы средствами html и css
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38360074&tid=1448019]:
 0ms
get settings:
 8ms
get forum list:
 12ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 144ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 43ms
get tp. blocked users:
 1ms
others: 207ms
total:  427ms
созд. / загр.: 427ms
x
x
Закрыть


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