Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Ограничение вывода таблицы средствами html и css / 12 сообщений из 12, страница 1 из 1
07.08.2013, 21:20
    #38358882
Scar714
Scar714
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ограничение вывода таблицы средствами html и css
Доброго времени суток!

Подскажите, как можно ограничить вывод широкой таблицы, чтобы не поплыл дизайн? Никак не могу это сделать. Если таблица не широкая и экран довольно большой и все умещается, то смотрится все хорошо, но как только таблица увеличивается в ширину (добавляются новые столбцы), то все рушится. Проблему решил только установкой 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
| Ответить | Цитировать | Написать  
08.08.2013, 13:02
    #38359534
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ограничение вывода таблицы средствами html и css
Scar714как центрировать по вертикали и горизонтали текст внутри блока
Используй табличку для таких дел, будет работать везде...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.08.2013, 17:05
    #38360030
Denis1991
Denis1991
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ограничение вывода таблицы средствами html и css
Может попробовать не просто width а использовать max-width?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.08.2013, 17:25
    #38360068
Denis1991
Denis1991
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ограничение вывода таблицы средствами html и css
Scar714 как центрировать по вертикали и горизонтали текст внутри блока класса .del?

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

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

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

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

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

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

Тогда попробуйту текст вставит в тег <a></a> а его уже позиционировать на сайте
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.08.2013, 09:23
    #38360416
Denis1991
Denis1991
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ограничение вывода таблицы средствами html и css
попробуйте*
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.08.2013, 11:01
    #38360532
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ограничение вывода таблицы средствами html и css
Scar714Для чего? display: table-cell не подойдет?
Если выглядит как собака, лает как собака - таки может быть это и еть собака?
Но решать тебе...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.08.2013, 00:15
    #38361679
Scar714
Scar714
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ограничение вывода таблицы средствами html и css
Если кому интересно, то данные задачи в итоге решил вот так:
Код: 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
| Ответить | Цитировать | Написать  
11.08.2013, 11:07
    #38362193
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ограничение вывода таблицы средствами html и css
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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Ограничение вывода таблицы средствами html и css / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 1012ms
Закрыть
start [/forum/search_topic.php?author=alex___&author_mode=last_posts&do_search=1]:
 0ms
get settings:
 9ms
get forum list:
 12ms
get settings:
 6ms
get forum list:
 17ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 159ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 741ms
total:  1012ms
x
x
Закрыть


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