Здравствуйте Гость ( Вход | Регистрация ) | Выслать повторно письмо для активации |
Страницы: (2) [1] 2 ( Перейти к первому непрочитанному сообщению ) |
Hиколай_54 |
Отправлено: Oct 3 2008, 10:47 AM
|
Солдат Группа: 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> </TH> <TH> </TH> <TH> </TH> <TH> </TH> <TH> </TH> <TH> </TH> <TH> </TH> <TH> </TH> </TR> <TR> <TH>Major</TH> <TH>Sex</TH> <TH>English</TH> <TH>Japanese</TH> <TH>прп</TH> <TH>Calculus</TH> <TH> </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"> </TD> <TD rowspan="3">80</TD></TR> <TR> <TD colspan="2"> </TD> </TR> <TR> <TD colspan="2"> </TD> <TD> </TD> </TR> <TR> <TD>Student02</TD> <TD colspan="2">Mathematicsmale</TD> <TD>90</TD> <TD>88</TD> <TD> </TD> <TD>100</TD> <TD> </TD> <TD>90</TD></TR> <TR> <TD>Student03</TD> <TD>Languages</TD> <TD>female</TD> <TD>85</TD> <TD>95</TD> <TD> </TD> <TD>80</TD> <TD> </TD> <TD>85</TD></TR> <TR> <TD>Student04</TD> <TD>Languages</TD> <TD>male</TD> <TD>60</TD> <TD>55</TD> <TD> </TD> <TD>100</TD> <TD> </TD> <TD>100</TD></TR> <TR> <TD>Student05</TD> <TD>Languages</TD> <TD>female</TD> <TD>68</TD> <TD>80</TD> <TD> </TD> <TD>95</TD> <TD> </TD> <TD>80</TD></TR> <TR> <TD>Student06</TD> <TD>Mathematics</TD> <TD>male</TD> <TD>100</TD> <TD>99</TD> <TD> </TD> <TD>100</TD> <TD> </TD> <TD>90</TD></TR> <TR> <TD>Student07</TD> <TD>Mathematics</TD> <TD>male</TD> <TD>85</TD> <TD>68</TD> <TD> </TD> <TD>90</TD> <TD> </TD> <TD>90</TD></TR> <TR> <TD>Student08</TD> <TD>Languages</TD> <TD>male</TD> <TD>100</TD> <TD>90</TD> <TD> </TD> <TD>90</TD> <TD> </TD> <TD>85</TD></TR> <TR> <TD>Student09</TD> <TD>Mathematics</TD> <TD>male</TD> <TD>80</TD> <TD>50</TD> <TD> </TD> <TD>65</TD> <TD> </TD> <TD>75</TD></TR> <TR> <TD>Student10</TD> <TD>Languages</TD> <TD>male</TD> <TD>85</TD> <TD>100</TD> <TD> </TD> <TD>100</TD> <TD> </TD> <TD>90</TD></TR> <TR> <TD>Student11</TD> <TD>Languages</TD> <TD>male</TD> <TD>86</TD> <TD>85</TD> <TD> </TD> <TD>100</TD> <TD> </TD> <TD>100</TD></TR> <TR> <TD>Student12</TD> <TD>Mathematics</TD> <TD>female</TD> <TD>100</TD> <TD>75</TD> <TD> </TD> <TD>70</TD> <TD> </TD> <TD>85</TD></TR> <TR> <TD>Student13</TD> <TD>Languages</TD> <TD>female</TD> <TD>100</TD> <TD>80</TD> <TD> </TD> <TD>100</TD> <TD> </TD> <TD>90</TD></TR> <TR> <TD>Student14</TD> <TD>Languages</TD> <TD>female</TD> <TD>50</TD> <TD>45</TD> <TD> </TD> <TD>55</TD> <TD> </TD> <TD>90</TD></TR> <TR> <TD>Student15</TD> <TD>Languages</TD> <TD>male</TD> <TD>95</TD> <TD>35</TD> <TD> </TD> <TD>100</TD> <TD> </TD> <TD>90</TD></TR> <TR> <TD>Student16</TD> <TD>Languages</TD> <TD>female</TD> <TD>100</TD> <TD>50</TD> <TD> </TD> <TD>30</TD> <TD> </TD> <TD>70</TD></TR> <TR> <TD>Student17</TD> <TD>Languages</TD> <TD>female</TD> <TD>80</TD> <TD>100</TD> <TD> </TD> <TD>55</TD> <TD> </TD> <TD>65</TD></TR> <TR> <TD>Student18</TD> <TD>Mathematics</TD> <TD>male</TD> <TD>30</TD> <TD>49</TD> <TD> </TD> <TD>55</TD> <TD> </TD> <TD>75</TD></TR> <TR> <TD>Student19</TD> <TD>Languages</TD> <TD>male</TD> <TD>68</TD> <TD>90</TD> <TD> </TD> <TD>88</TD> <TD> </TD> <TD>70</TD></TR> <TR> <TD>Student20</TD> <TD>Mathematics</TD> <TD>male</TD> <TD>40</TD> <TD>45</TD> <TD> </TD> <TD>40</TD> <TD> </TD> <TD>80</TD></TR> <TR> <TD>Student21</TD> <TD>Languages</TD> <TD>male</TD> <TD>50</TD> <TD>45</TD> <TD> </TD> <TD>100</TD> <TD> </TD> <TD>100</TD></TR> <TR> <TD>Student22</TD> <TD>Mathematics</TD> <TD>male</TD> <TD>100</TD> <TD>99</TD> <TD> </TD> <TD>100</TD> <TD> </TD> <TD>90</TD></TR> <TR> <TD>Student23</TD> <TD>Languages</TD> <TD>female</TD> <TD>85</TD> <TD>80</TD> <TD> </TD> <TD>80</TD> <TD> </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 } |
Hиколай_54 |
Отправлено: Oct 3 2008, 01:24 PM
|
Солдат Группа: Members Сообщений: 9 Пользователь №: 1914 Регистрация: 3-October 08 |
Народ пожалуйста подскажите, я думаю для профи это просто, что то у меня не получается?
|
DreamWeatheR |
Отправлено: Oct 4 2008, 08:00 PM
|
Генерал Группа: Members Сообщений: 168 Пользователь №: 1495 Регистрация: 1-April 08 |
Я б сделал через <iframe src="html_file_s_tabliceu.html"></iframe> и не парился
-------------------- Форум на тему Forex, с оплатой за сообщения. 1 сообщение - 30 центов. Начни торговать с нуля Мониторинг обменников -самые выгодные курсы + ежедневный бонус 0.01 – 0.20 WMR + партнерская программа от 3 до 15 центов за посетителя |
Hиколай_54 |
Отправлено: Oct 7 2008, 09:20 AM
|
Солдат Группа: Members Сообщений: 9 Пользователь №: 1914 Регистрация: 3-October 08 |
А пример можно, я только учусь.
И еще оди вопрос, можно зафиксировать размер столбца и если в ячейку забивается слово которое не умещается в ячейку и это слово резалось само и переносилось |
Hиколай_54 |
Отправлено: Oct 7 2008, 11:09 AM
|
Солдат Группа: Members Сообщений: 9 Пользователь №: 1914 Регистрация: 3-October 08 |
Может кто знает где в интернете найти информавцию по таблицам
|
rudvil |
Отправлено: Oct 7 2008, 11:11 AM
|
||
Генерал Группа: Members Сообщений: 235 Пользователь №: 1216 Регистрация: 25-October 07 |
в <table> выставляеш ширину таблицы и все,текст сам будет переносится -------------------- xor |
||
Hиколай_54 |
Отправлено: Oct 7 2008, 02:29 PM
|
Солдат Группа: Members Сообщений: 9 Пользователь №: 1914 Регистрация: 3-October 08 |
Вы имеете ввиду ширину ячейки?
Если у меня слово шире заданной ячейки, оно ведь раздвинит ячейку. |
Hиколай_54 |
Отправлено: Oct 7 2008, 02:36 PM
|
Солдат Группа: 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> |
Hиколай_54 |
Отправлено: Oct 7 2008, 02:42 PM
|
Солдат Группа: Members Сообщений: 9 Пользователь №: 1914 Регистрация: 3-October 08 |
На форуме есть хоть один полковник, что бы реально на примере помочь солдату. А то только отписки.
|
rudvil |
Отправлено: Oct 7 2008, 02:43 PM
|
||||
Генерал Группа: Members Сообщений: 235 Пользователь №: 1216 Регистрация: 25-October 07 |
вот,но тут есть маленький косяк если писать без пробелов то тогда ячейка растянется. -------------------- xor |
||||
Страницы: (2) [1] 2 |