Страницы: (2) [1] 2  ( Перейти к первому непрочитанному сообщению ) Reply to this topicStart new topicStart Poll

Как в таблице зафиксировать шапку

, Помогите чайнику
Hиколай_54
Отправлено: Oct 3 2008, 10:47 AM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 9
Пользователь №: 1914
Регистрация:
3-October 08



Помогите чайнику
Нашел на сайте как зафиксировать шапку таблице при прокрутке с помощью CSS http://home.tampabay.rr.com/bmerkey/exampl...column-csv.html

В этом примере можно изменять ширину колонок только всех одинаково а мне надо что бы каждой колонке я через CSS задавал разную ширину. Конечно очень жаль что неработает в опере в тоже время вот другая ссылка http://home.tampabay.rr.com/bmerkey/exampl...le-header2.html там в опере работае шапка таблицы зафиксирована.

Вот пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0067)http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html -->
<!-- this comment puts all versions of Internet Explorer into "reliable mode." --><HTML><HEAD><TITLE>Lock Columns, Column Locking, Freeze Columns in HTML Tables</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251"><LINK
href="locked-column.css"
type=text/css rel=stylesheet>
<META
content="freeze HTML table columns; lock columns; freeze columns; CSS column locking; prevent column scroll; fixed column; fixed table header; lock header; freeze header; CSS tips; freezing column;"
name=keywords>


<META content="MSHTML 6.00.6000.16705" name=GENERATOR></HEAD>
<BODY>
<H2 style="COLOR: navy">Lock or Freeze Table Columns plus Non-Scroll Headers
<BR><SPAN style="FONT-SIZE: 75%">(Internet Explorer CSS solution)</SPAN></H2>
<DIV id=tbl-container>
<TABLE id=tbl>
<THEAD>
<TR>
<TH rowspan="2">Name</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
<TH>&nbsp;</TH>
</TR>
<TR>
<TH>Major</TH>
<TH>Sex</TH>
<TH>English</TH>
<TH>Japanese</TH>
<TH>прп</TH>
<TH>Calculus</TH>
<TH>&nbsp;</TH>
<TH>Geometry</TH></TR></THEAD>
<TBODY>
<TR>
<TD rowspan="3">Student01</TD>
<TD colspan="2">Languagesmale</TD>
<TD rowspan="3">80</TD>
<TD rowspan="2">70</TD>
<TD rowspan="3">44444444</TD>
<TD rowspan="3">75</TD>
<TD rowspan="3">&nbsp;</TD>
<TD rowspan="3">80</TD></TR>
<TR>
<TD colspan="2">&nbsp;</TD>
</TR>
<TR>
<TD colspan="2">&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>Student02</TD>
<TD colspan="2">Mathematicsmale</TD>
<TD>90</TD>
<TD>88</TD>
<TD>&nbsp;</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>90</TD></TR>
<TR>
<TD>Student03</TD>
<TD>Languages</TD>
<TD>female</TD>
<TD>85</TD>
<TD>95</TD>
<TD>&nbsp;</TD>
<TD>80</TD>
<TD>&nbsp;</TD>
<TD>85</TD></TR>
<TR>
<TD>Student04</TD>
<TD>Languages</TD>
<TD>male</TD>
<TD>60</TD>
<TD>55</TD>
<TD>&nbsp;</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>100</TD></TR>
<TR>
<TD>Student05</TD>
<TD>Languages</TD>
<TD>female</TD>
<TD>68</TD>
<TD>80</TD>
<TD>&nbsp;</TD>
<TD>95</TD>
<TD>&nbsp;</TD>
<TD>80</TD></TR>
<TR>
<TD>Student06</TD>
<TD>Mathematics</TD>
<TD>male</TD>
<TD>100</TD>
<TD>99</TD>
<TD>&nbsp;</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>90</TD></TR>
<TR>
<TD>Student07</TD>
<TD>Mathematics</TD>
<TD>male</TD>
<TD>85</TD>
<TD>68</TD>
<TD>&nbsp;</TD>
<TD>90</TD>
<TD>&nbsp;</TD>
<TD>90</TD></TR>
<TR>
<TD>Student08</TD>
<TD>Languages</TD>
<TD>male</TD>
<TD>100</TD>
<TD>90</TD>
<TD>&nbsp;</TD>
<TD>90</TD>
<TD>&nbsp;</TD>
<TD>85</TD></TR>
<TR>
<TD>Student09</TD>
<TD>Mathematics</TD>
<TD>male</TD>
<TD>80</TD>
<TD>50</TD>
<TD>&nbsp;</TD>
<TD>65</TD>
<TD>&nbsp;</TD>
<TD>75</TD></TR>
<TR>
<TD>Student10</TD>
<TD>Languages</TD>
<TD>male</TD>
<TD>85</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>90</TD></TR>
<TR>
<TD>Student11</TD>
<TD>Languages</TD>
<TD>male</TD>
<TD>86</TD>
<TD>85</TD>
<TD>&nbsp;</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>100</TD></TR>
<TR>
<TD>Student12</TD>
<TD>Mathematics</TD>
<TD>female</TD>
<TD>100</TD>
<TD>75</TD>
<TD>&nbsp;</TD>
<TD>70</TD>
<TD>&nbsp;</TD>
<TD>85</TD></TR>
<TR>
<TD>Student13</TD>
<TD>Languages</TD>
<TD>female</TD>
<TD>100</TD>
<TD>80</TD>
<TD>&nbsp;</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>90</TD></TR>
<TR>
<TD>Student14</TD>
<TD>Languages</TD>
<TD>female</TD>
<TD>50</TD>
<TD>45</TD>
<TD>&nbsp;</TD>
<TD>55</TD>
<TD>&nbsp;</TD>
<TD>90</TD></TR>
<TR>
<TD>Student15</TD>
<TD>Languages</TD>
<TD>male</TD>
<TD>95</TD>
<TD>35</TD>
<TD>&nbsp;</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>90</TD></TR>
<TR>
<TD>Student16</TD>
<TD>Languages</TD>
<TD>female</TD>
<TD>100</TD>
<TD>50</TD>
<TD>&nbsp;</TD>
<TD>30</TD>
<TD>&nbsp;</TD>
<TD>70</TD></TR>
<TR>
<TD>Student17</TD>
<TD>Languages</TD>
<TD>female</TD>
<TD>80</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>55</TD>
<TD>&nbsp;</TD>
<TD>65</TD></TR>
<TR>
<TD>Student18</TD>
<TD>Mathematics</TD>
<TD>male</TD>
<TD>30</TD>
<TD>49</TD>
<TD>&nbsp;</TD>
<TD>55</TD>
<TD>&nbsp;</TD>
<TD>75</TD></TR>
<TR>
<TD>Student19</TD>
<TD>Languages</TD>
<TD>male</TD>
<TD>68</TD>
<TD>90</TD>
<TD>&nbsp;</TD>
<TD>88</TD>
<TD>&nbsp;</TD>
<TD>70</TD></TR>
<TR>
<TD>Student20</TD>
<TD>Mathematics</TD>
<TD>male</TD>
<TD>40</TD>
<TD>45</TD>
<TD>&nbsp;</TD>
<TD>40</TD>
<TD>&nbsp;</TD>
<TD>80</TD></TR>
<TR>
<TD>Student21</TD>
<TD>Languages</TD>
<TD>male</TD>
<TD>50</TD>
<TD>45</TD>
<TD>&nbsp;</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>100</TD></TR>
<TR>
<TD>Student22</TD>
<TD>Mathematics</TD>
<TD>male</TD>
<TD>100</TD>
<TD>99</TD>
<TD>&nbsp;</TD>
<TD>100</TD>
<TD>&nbsp;</TD>
<TD>90</TD></TR>
<TR>
<TD>Student23</TD>
<TD>Languages</TD>
<TD>female</TD>
<TD>85</TD>
<TD>80</TD>
<TD>&nbsp;</TD>
<TD>80</TD>
<TD>&nbsp;</TD>
<TD>80</TD></TR></TBODY></TABLE>
<p><br>
</p>
</DIV><table width="800" border="0">
<tr>
<td>444</td>
</tr>
</table>
<!-- end tbl-container -->
</BODY></HTML>

А это CSS
DIV#tbl-container {
OVERFLOW: auto;
WIDTH: 850px;
SCROLLBAR-BASE-COLOR: #ffeaff;
HEIGHT: 252px
}
TABLE {
TABLE-LAYOUT: fixed; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: whitesmoke
}
/* Задается ширина ячеки */
DIV#tbl-container TR TH {
WIDTH: 90px
}
THEAD TH {
BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; CURSOR: default; COLOR: white; POSITION: relative; BACKGROUND-COLOR: navy; TEXT-ALIGN: center
}
THEAD TH.locked {
BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; CURSOR: default; COLOR: white; POSITION: relative; BACKGROUND-COLOR: navy; TEXT-ALIGN: center
}
THEAD TH {
Z-INDEX: 20; ; TOP: expression(document.getElementById("tbl-container").scrollTop-2)
}
THEAD TH.locked {
Z-INDEX: 30
}
TD.locked {
BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; Z-INDEX: 10; ; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); POSITION: relative; BACKGROUND-COLOR: #ffeaff
}
TH.locked {
BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; Z-INDEX: 10; ; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); POSITION: relative; BACKGROUND-COLOR: #ffeaff
}
BODY {
COLOR: black; FONT-FAMILY: Arial, sans-serif; BACKGROUND-COLOR: white
}
TD {
PADDING-RIGHT: 5px;
PADDING-LEFT: 2px;
FONT-SIZE: 12px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: silver 1px solid;
PADDING-TOP: 2px;
BORDER-BOTTOM: silver 1px solid;
TEXT-ALIGN: center
}
BUTTON {
FONT-WEIGHT: bold; MARGIN-BOTTOM: 5px; WIDTH: 150px; COLOR: navy
}
DIV.infobox {
BORDER-RIGHT: #6633ff 4px double; PADDING-RIGHT: 8px; BORDER-TOP: #6633ff 4px double; PADDING-LEFT: 8px; TEXT-JUSTIFY: newspaper; FONT-SIZE: 12px; RIGHT: 5px; LEFT: 470px; PADDING-BOTTOM: 8px; BORDER-LEFT: #6633ff 4px double; PADDING-TOP: 8px; BORDER-BOTTOM: #6633ff 4px double; FONT-FAMILY: Arial, sans-serif; POSITION: absolute; TOP: 110px; BACKGROUND-COLOR: whitesmoke; TEXT-ALIGN: justify
}
BLOCKQUOTE {
BORDER-RIGHT: #6633ff 4px double;
PADDING-RIGHT: 20px;
BORDER-TOP: #6633ff 4px double;
PADDING-LEFT: 20px;
FONT-SIZE: 85%;
PADDING-BOTTOM: 8px;
MARGIN: 3% auto auto 0px;
BORDER-LEFT: #6633ff 4px double;
WIDTH: 418px;
PADDING-TOP: 8px;
BORDER-BOTTOM: #6633ff 4px double;
FONT-FAMILY: Tahoma, Verdana, sans-serif;
BACKGROUND-COLOR: whitesmoke
}
.sig {
COLOR: #6633ff; FONT-STYLE: italic; LETTER-SPACING: 2px
}


PMEmail Poster
Top
Hиколай_54
Отправлено: Oct 3 2008, 01:24 PM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 9
Пользователь №: 1914
Регистрация:
3-October 08



Народ пожалуйста подскажите, я думаю для профи это просто, что то у меня не получается?
PMEmail Poster
Top
DreamWeatheR
Отправлено: Oct 4 2008, 08:00 PM
Quote Post


  Генерал
*

Группа: Members
Сообщений: 168
Пользователь №: 1495
Регистрация:
1-April 08



Я б сделал через <iframe src="html_file_s_tabliceu.html"></iframe> и не парился


--------------------
user posted image
Форум на тему Forex, с оплатой за сообщения. 1 сообщение - 30 центов. Начни торговать с нуля
Мониторинг обменников -самые выгодные курсы + ежедневный бонус 0.01 – 0.20 WMR + партнерская программа от 3 до 15 центов за посетителя
PMEmail PosterUsers WebsiteICQ
Top
Hиколай_54
Отправлено: Oct 7 2008, 09:20 AM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 9
Пользователь №: 1914
Регистрация:
3-October 08



А пример можно, я только учусь.
И еще оди вопрос, можно зафиксировать размер столбца и если в ячейку забивается слово которое не умещается в ячейку и это слово резалось само и переносилось
PMEmail Poster
Top
Hиколай_54
Отправлено: Oct 7 2008, 11:09 AM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 9
Пользователь №: 1914
Регистрация:
3-October 08



Может кто знает где в интернете найти информавцию по таблицам
PMEmail Poster
Top
rudvil
Отправлено: Oct 7 2008, 11:11 AM
Quote Post


  Генерал
*

Группа: Members
Сообщений: 235
Пользователь №: 1216
Регистрация:
25-October 07



QUOTE (Hиколай_54 @ Oct 7 2008, 08:20 AM)
А пример можно, я только учусь.
И еще оди вопрос, можно зафиксировать размер столбца и если в ячейку забивается слово которое не умещается в ячейку и это слово резалось само и переносилось

в <table> выставляеш ширину таблицы и все,текст сам будет переносится


--------------------
xor
PMEmail Poster
Top
Hиколай_54
Отправлено: Oct 7 2008, 02:29 PM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 9
Пользователь №: 1914
Регистрация:
3-October 08



Вы имеете ввиду ширину ячейки?
Если у меня слово шире заданной ячейки, оно ведь раздвинит ячейку.
PMEmail Poster
Top
Hиколай_54
Отправлено: Oct 7 2008, 02:36 PM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 9
Пользователь №: 1914
Регистрация:
3-October 08



Вы попробуйте не чего не получается, если есть пробел то перенесется а если нет все равно раздвинит
вот например
<table width="50" border="0" cellspacing="0" cellpadding="4">
<tr class="ListHeaderColor">
<th width="10"> NameLoremIpsumDolor y</th>
<th width="10" style="text-align: center"> Price</th>
</tr>

<tr class="ListColorOdd">
<td> <a href="#">Sadipscing</a> </td>
<td style="text-align: center"> 2.85 </td>
</tr>
</table>
PMEmail Poster
Top
Hиколай_54
Отправлено: Oct 7 2008, 02:42 PM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 9
Пользователь №: 1914
Регистрация:
3-October 08



На форуме есть хоть один полковник, что бы реально на примере помочь солдату. А то только отписки.
PMEmail Poster
Top
rudvil
Отправлено: Oct 7 2008, 02:43 PM
Quote Post


  Генерал
*

Группа: Members
Сообщений: 235
Пользователь №: 1216
Регистрация:
25-October 07



QUOTE (Hиколай_54 @ Oct 7 2008, 01:29 PM)
Вы имеете ввиду ширину ячейки?
Если у меня слово шире заданной ячейки, оно ведь раздвинит ячейку.

CODE
<table align="center" border="1" style="width:300px;">
<tr>
<td align="right">Dliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiinnij text</td>
<td align="left">Dliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
iinnij text</td>
</tr>
<tr>
<td align="right">Dliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiiiiiiiiiiinnij text</td>
<td align="left">Dliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
iiiiiiiiiiiiiiiiiiiiiiiiinnij text</td>
</tr>
</table>

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


--------------------
xor
PMEmail Poster
Top

Topic OptionsСтраницы: (2) [1] 2  Reply to this topicStart new topicStart Poll

 



[ Script Execution time: 0.0207 ]   [ 10 queries used ]   [ GZIP выключен ]