Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:
RSS
ВКонтакте

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

таблицы на web ресурсе

Web программирование
43K
07 августа 2009 года
Smoke88
34 / / 07.08.2009
Приветствую всех! :)
Вывожу таблицы на web ресурсе для работы. Разные базы данных.
Хотел реализовать, чтобы при прокрутке таблицы вниз заголовки колонок оставались на месте. Как в экселе закрепление области, например.

Предполагаю, что можно сделать фреймами. Но как? :confused:

Сайт работает на Апаче, пхп 5 и мускуле 5. При выводе таблиц на экран естественно делаю запросы типа SELECT в мускул. Вернувшийся массив обрабатываю и циклом вывожу в хтмл. :)
По порядку
Сначала полезные
Сначала решения

26 ответов

444
08 августа 2009 года
patison
323 / / 15.03.2007
Ну можно ифреймом. Схема примерно следующая:
Делаешь таблицу по центру страницы. С одной строчкой, в каждой ячейке - название заголовка таблицы.
Ровно под ней делаешь ифрейм, и в нём уже генеришь основную таблицу. Будешь скроллить саму таблицу - и всё будет гуд, т.к. скролится по сути содержимое ифрейма.
Правда тут могут возникнуть проблемы с шириной ячеек. Т.е. не будет совпадать ширина заголовков с щириной ячеек в которых контент.

Другой вариант - это генерить нормально таблицу на странице, а вверху страницы прилепить див с названиями заголовков, и сделать так что-б при скролле страницы див "приклеивался" к заголовку окна и скроллился со всей страницей , примерно как тут (окошко справа снизу) - http://www.wtfmacos.ru/
2.1K
08 августа 2009 года
wAngel
129 / / 23.11.2004
Еще вариант, что-то вроде:
[HTML]
<div>
<div style="width:300px;">
<table width="100%">
<tr><th>Header 1</th><th>Header 2</th></tr>
</table>
</div>
<div style="overflow:scroll; width:300px; height:300px;">
<table width="100%" style="text-align:center">
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</div>
</div>
[/HTML]
т.е. поиграться с css overflow.
563
08 августа 2009 года
MrLinker
249 / / 17.09.2006
Цитата:
Еще вариант, что-то вроде


Да да... Только у варианта этого трабла: не совпадает ширина ячеек (шапки и ячеек таблицы снизу)...
А мне что-то не спится сегодня, решил поломать себе мозг.
Пришла идея:
Можно решить проблему ценой дублирования шапки. При этом, для второй таблицы задаем отрицательный margin, равный высоте шапки.
Вот собственно и вся идея.
Вопрос лишь в том, как это наиболее корректно реализовать c причудами браузеров. IE, например, рисует скролл не туды, по крайней мере 6 версия... Бордюрчики не везде зачетные.

Мой чудо код:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Хэй мэээн, я тут таблоид скроллю, а это, типа, шапка на месте там и все такое...</title>
<style type="text/css">
div.tbl
{
background-color: #D4D0C8;
border: 1px solid gray;
width: 600px; /* Ширина таблички */
padding: 0px;
margin: 0px;
}

div.tbl div.head
{
border: 0px;
padding-right: 16px;
padding-right: expression('0px'); /* я тоже крут */
}

div.tbl table
{
border: 0px;
border-collapse:collapse;
width: 100%;
}

div.tbl table th
{
height: 45px;
border: 1px solid gray;
background-color: #EEE;
}

div.tbl table.data
{
margin-top: -48px;
}

div.tbl table.data th
{
visibility:hidden;
}

div.tbl table.data td
{
background-color: white;
border: 1px solid gray;
border-bottom: 0px;
}

div.tcontent
{
overflow-y: scroll; /* а вот захотелось */
height: 150px;
}

</style>

</head>

<body>
<div class="tbl">
<div class="head">
<table>
<tr>
<th>Наименоваине</th>
<th>Начальный остаток</th>
<th>Приход</th>
<th>Расход</th>
<th>Конечный остаток</th>
</tr>
</table>
</div>
<div class="tcontent">
<table class="data">
<tr>
<th>Наименоваине</th>
<th>Начальный остаток</th>
<th>Приход</th>
<th>Расход</th>
<th>Конечный остаток</th>
</tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td></tr>
<tr><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td></tr>
<tr><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td></tr>
<tr><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td></tr>
<tr><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td></tr>
<tr><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td></tr>
<tr><td>B</td><td>B</td><td>B</td><td>B</td><td>B</td></tr>
</table>
</div>
</div>
</body>

</html>
[/HTML]
Есть идеи?

43K
08 августа 2009 года
Smoke88
34 / / 07.08.2009
Все варианты интересные, спасибо. Пробану. Отпишусь на каком остановился.
43K
08 августа 2009 года
Smoke88
34 / / 07.08.2009
Последний вариант конечно наиболее симпотный.
Но во всех вариантах, контент колонки и колонки шапки разлазятся, если текст контента шире, чем название колонки.
Надо еще поиграться.
43K
08 августа 2009 года
Smoke88
34 / / 07.08.2009
Как добиться чтобы див не больше высоты экрана был. Получать от клиента размер окна браузера?
563
09 августа 2009 года
MrLinker
249 / / 17.09.2006
Цитата:
Последний вариант конечно наиболее симпотный.
Но во всех вариантах, контент колонки и колонки шапки разлазятся, если текст контента шире, чем название колонки.


Да да, хреновая идея пришла, как и все, приходящие на ночь глядя...
Лажа в том, что цена при таком подходе заключается не только в копировании заголовков вниз, но также и данные необходимо дублировать вверх.
А это писец.
Незачет, Андрюшенька, дорогой, незачет.

563
09 августа 2009 года
MrLinker
249 / / 17.09.2006
Посмотрите тут:
http://www.imaputz.com/cssStuff/bigFourVersion.html
43K
09 августа 2009 года
Smoke88
34 / / 07.08.2009
К сожалению на IE8 таблица не скролится. Хотя в мозилле работает корректно.
Хотя твой вариант работал и на IE8.
CSS знаю слабо, подскажи в каком месте чел по твоей ссылке отработал ширину колонок?

P/s/ В идеале конечно хотелось бы не использовать жаву скрипт. Не доверяю я клиенту :)
43K
09 августа 2009 года
Smoke88
34 / / 07.08.2009
2 часа посвятил поискам решения. Ничего универсального найти не удалось. :(
43K
11 августа 2009 года
Smoke88
34 / / 07.08.2009
Решение найдено! Точнее позаимствовано.
Достаточно лаконичное.
Смотрите тут: http://jacky.seezone.net/fixedheader/fixedheader.html
2.1K
11 августа 2009 года
wAngel
129 / / 23.11.2004
Цитата:
Решение найдено!


Ну так сказали бы, что готовы использовать JS фреймворки.

43K
12 августа 2009 года
Smoke88
34 / / 07.08.2009
Стал готов после того как убедился, что иным способом решить врят ли удастся :)
325
17 августа 2009 года
Franky
723 / / 10.08.2005
Цитата: Smoke88
Стал готов после того как убедился, что иным способом решить врят ли удастся :)



А на ДИВах будет не проще? Если я правильно понял задачу, конечно.

Свернуть исходник 
Код:
<div style='width: 500px; text-align: center; margin: 0;'>
<table border=1 width='400'>
<tr>
<th width='100'>Заголовок</th>
<th width='100'>Заголовок</th>
<th width='100'>Заголовок</th>
<th width='100'>Заголовок</th>
</tr>
</table>
</div>

<div style='width: 500px; text-align: center; margin: 0; height: 100px; overflow: scroll;'>
<table border=1 width='400'>
<tr>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
</tr>
<tr>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
</tr>
<tr>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
</tr>
<tr>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
</tr>
<tr>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
<td width='100'>Содержимое</td>
</tr>


</table>
</div>
325
17 августа 2009 года
Franky
723 / / 10.08.2005
а, вижу похожий вариант уже был... Зато у меня с шапкой всё в порядке :)
48K
17 августа 2009 года
wis3b0t
13 / / 29.07.2009
вот еще вариант
Фаил стиля me.css:

[HTML]
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #333333;
color: #dadada;
}

h1 {
text-align:center;
color:#00749E;
}

#title {
width:300px;
height:300px;
left:489px;
position:absolute;
}

#board {
width:300px;
height:300px;
overflow:scroll;
position:absolute;
margin:4px 15px;
top:100px;
left:475px;
display:block;

}

#TR {

margin:0px 0px;
display:table-row;
border:1px solid #00749E;
}

#TD {
height:30px;
width:120px;
padding:10px;
display:table-cell;
border:1px solid #00749E;
}
[/HTML]

Файл index.html
[HTML]
<html>
<head>
<title>Boards 'R' Us</title>
<link href="me.css" type="text/css" rel="stylesheet" />
</head>
<body>


<div id="title">
<h1>Boards 'R' Us Sales Report</h1>
<hr style="width:300px;" />
</div>
<div id="board">

<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">Showboards Sold </p> <p id="TD">1012</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What I Sell'em For </p> <p id="TD">$249.95</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What it Costs Me </p> <p id="TD">$84.22</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">Showboards Sold </p> <p id="TD">1012</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What I Sell'em For </p> <p id="TD">$249.95</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What it Costs Me </p> <p id="TD">$84.22</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">Showboards Sold </p> <p id="TD">1012</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What I Sell'em For </p> <p id="TD">$249.95</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What it Costs Me </p> <p id="TD">$84.22</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">Showboards Sold </p> <p id="TD">1012</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What I Sell'em For </p> <p id="TD">$249.95</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What it Costs Me </p> <p id="TD">$84.22</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">Showboards Sold </p> <p id="TD">1012</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What I Sell'em For </p> <p id="TD">$249.95</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What it Costs Me </p> <p id="TD">$84.22</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">Showboards Sold </p> <p id="TD">1012</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What I Sell'em For </p> <p id="TD">$249.95</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What it Costs Me </p> <p id="TD">$84.22</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">Showboards Sold </p> <p id="TD">1012</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What I Sell'em For </p> <p id="TD">$249.95</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What it Costs Me </p> <p id="TD">$84.22</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">Showboards Sold </p> <p id="TD">1012</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What I Sell'em For </p> <p id="TD">$249.95</p>
</p>
<p id="TR">
<p style="background:e0e0e0; color:#000;" id="TD">What it Costs Me </p> <p id="TD">$84.22</p>
</p>

</div>


</body>
</html>
[/HTML]:


Для осла потребуются CSS хаки.
43K
21 августа 2009 года
Smoke88
34 / / 07.08.2009
Цитата: Franky
а, вижу похожий вариант уже был... Зато у меня с шапкой всё в порядке :)



Недопонял ты проблемку. Попробуй в своей таблице ввести в одну из ячеек длинный набор символов:
например: "Содержаниееееееееееееееееееееееееееееееееееееее".
Ты увидишь, что случится с твоей шапкой. :rolleyes:

43K
21 августа 2009 года
Smoke88
34 / / 07.08.2009
Цитата: wis3b0t
вот еще вариант
Фаил стиля me.css:


Для осла потребуются CSS хаки.




Хм. это что такое? в IE и Firefox отображется вообще по разному. Да и где здесь фиксация шапки то ? :eek:

325
21 августа 2009 года
Franky
723 / / 10.08.2005
Цитата: Smoke88
Недопонял ты проблемку. Попробуй в своей таблице ввести в одну из ячеек длинный набор символов:
например: "Содержаниееееееееееееееееееееееееееееееееееееее".
Ты увидишь, что случится с твоей шапкой. :rolleyes:



ну про произвольную ширину речи не было.
Тогда задать каждой таблице свой ID и сравнивать типа такого:

 
Код:
<script language="JavaScript" type="text/javascript">
w1 = document.getElementById('tb1').style.width;
w2 = document.getElementById("tb2").style.width;
if (w1>w2) document.getElementById("tb2").style.width = w1;
else document.getElementById("tb1").style.width = w2;
</script>


только не забудь проставить у таблиц ширину стилями
 
Код:
style='width: 400px;'
563
22 августа 2009 года
MrLinker
249 / / 17.09.2006
Цитата:
Тогда задать каждой таблице свой ID и сравнивать типа такого:
...
только не забудь проставить у таблиц ширину стилями


Что-то мне подсказывает, что так просто не отделаться.
Если ширина ячейки изменится автоматически при добавлении текста, то получить реальную ширину через style.width не выйдет.
style.width вернет те же 400px.
Поэтому придется шаманить...
Видимо с такими методами, как getBoundingClientRect().
Пока не разбирался.

325
22 августа 2009 года
Franky
723 / / 10.08.2005
проверил, увы ты прав... :(
12
22 августа 2009 года
alekciy
3.0K / / 13.12.2005
Цитата: Smoke88
Стал готов после того как убедился, что иным способом решить врят ли удастся :)


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

12
22 августа 2009 года
alekciy
3.0K / / 13.12.2005
Цитата: MrLinker
Что-то мне подсказывает, что так просто не отделаться.
Если ширина ячейки изменится автоматически при добавлении текста, то получить реальную ширину через style.width не выйдет.


style.width содержить значение inline style, т.е. то, что явно прописано в атрибуте style элемента. Для текущего определения ширины (динамичесвкой или заданной через CSS файл) таким образом ширину узнать нельзя, для этого существуют другие методы.

325
22 августа 2009 года
Franky
723 / / 10.08.2005
Цитата: alekciy
для этого существуют другие методы.


какие, если не секрет?

12
22 августа 2009 года
alekciy
3.0K / / 13.12.2005
Цитата: Franky
какие, если не секрет?


Не секрет, но тут тебе помодет гугл. К тому тему даже на этом форуме поднимали пару раз и я даже в них отвечал. Повторятся влом, кому нужно найдет в поиске ;) ну и полезная практика ему будет.

563
22 августа 2009 года
MrLinker
249 / / 17.09.2006
Цитата:
Для текущего определения ширины (динамичесвкой или заданной через CSS файл) таким образом ширину узнать нельзя, для этого существуют другие методы.


Если речь идет о:

 
Код:
var computedStyle = element.currentStyle || window.getComputedStyle(element, null);

То, в данном случае, ничего не выйдет (работать будет только в Firefox).
Шаманить надо либо со всей веткой, расчитывая все оффсеты, поля да отступы, либо с getBoundingClientRect(), либо незнаю что еще.
Короче, копаем исходники фреймворков, например, метод width() в jquery.
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог