Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Таблица

Автор: MPx 25.1.2006, 11:29

Привет всем. Нужно сделать так, чтобы трёхколончатая таблица разъезжалась по особому Смотрите картинку... Нужно чтобы две первые колонки были фиксированные и не разъезжались, а последняя разъезжалась. Приведите пример в DIV и TABLE версиях, плиз... Заранее благодарен, MPx

Автор: R.M. 25.1.2006, 14:03

MPx А разницы практически нету как верстать, главное одно - высоту (если ненужно растяжение) указываеш в пикселях, ширину первых двух столбцов указываеш в пикселях (60 и 65 соответственно), ширину третьего процентах и будет всё как надо а уж извини таблицу из трёх столбиков сверстать - это уже сам

Автор: HipJ 25.1.2006, 14:04

Код <table border="0" cellspacing="0" cellpadding="0">   <tr>     <td width="60">&nbsp;</td>     <td width="65">&nbsp;</td>     <td>Вот данная колонка не имеет фиксированной ширины</td>   </tr> </table> Нужно сказать, что первые две будут разъезжаться, если слово будет слишком длинным... можно пофиксить, используя css св-во overflow (или как там оно =) ) Ну в общем подключи фантазию )

Автор: AntonioBanderaz 25.1.2006, 14:13

Код <table border="0" cellspacing="0" cellpadding="0">   <tr>     <td width="60px"><img src="__blank.gif" width = "60px" height = "1px" />&nbsp;</td>     <td width="65px"><img src="__blank.gif" width = "65px" height = "1px" />&nbsp;</td>     <td>Вот данная колонка не имеет фиксированной ширины</td>   </tr> </table> где __blank.gif - картинка, прозрачная с размерами 1/1 пикселей. я так иногда делаю... тогда столбцы никогда не будут меньше размера этой картинки...

Автор: Cheba 25.1.2006, 19:24

MPx, вообще-то неправильно начинать предложение с фразы "сделайте мне". Лично мне неприятно, когда кто-то совсем незнакомый сразу "сделай мне"... Ну, эт так... Вот тебе на дивах пример. Код <!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Strict//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US"> <head>     <title>Centering div element</title>     <style type="text/css"> #col1 {     float: left;     width: 60px;     background: #FF0; } #col2 {     float: left;     width: 65px;     background: #F80; } #col3 {     margin-left: 125px;     background: #F00; }     </style> </head> <body>     <div id="col1">Content goes here</div>     <div id="col2">Content goes here</div>     <div id="col3">Content goes here</div> </body> </html> Принцип действия. Работает это очень просто. Первые два слоя (div#col1 и div#col2) делаются плавающими слева. При этом они изымаются из нормального потока документа. Таким образом последний слой (div#col3) поднимется вверх и занимет всю ширину документа. Чтобы не возникало некрасивостей, а казалось, что у нас настоящие колонки на всю высоту документа мы делаем у третьего блока (div#col3) поле слева по ширине двух первых. Таким образом мы имеем трехколончатое расположение. Конечно, красота на этом все еще должна быть наведена, но нужного расположения мы добились. А вообще-то поиск рулит по всем параметрам. Это точно. Можешь проверить, если не веришь.

Автор: MPx 26.1.2006, 13:06

Куксикус Я знаю Но у меня (почему-то?) не получилось... и первая и вторая таблицы просто разъехались. Поэтому решил посоветоваться. HipJ Я там говорил про резиновую таблицу, а твой пример статический. Но принцип я твой понял. Я знаю, я тоже так думал делать. Но первые две колонки не стоят на месте... а двигаются... вместе с прогрессом Не совсем понял, к чему overflow. Это свойство для управления текста, если оно не помещается( Напиши пример, пожалуйста, как применить. AntonioBanderaz Спасибо. Про прозрачную картинку знаю. Я вообще обычно вставляю слой с фиксированным размером. Но мне надо, чтобы она не НЕ УМЕНЬШАЛАСЬ, а наоборот... не увеличивалась и была фиксированного размера. Cheba Я ведь не писал "сделай мне"... Я вообще вас всех люблю Просто по-мойму топик должен содержать суть темы, а не слёзы радости о том, как мне приятновидеть вас здесь всех и если у вас немного времени, не могли бы вы мне помочь сделать так и так. Если поможете, поставлю за вас свечку Теперь к делу Пример отличный, это как раз то, что мне надо. Просто пытался сделать такое же, но третья таблица у меня упорно не хотела ставиться в один ряд с первыми двумя (даже с float: left; ). А вообще-то поиск рулит по всем параметрам. Это точно. Можешь проверить, если не веришь. Честно говоря, позабыл про него( Пробежался по топикам первой страницы этой ветки, ничего не нашёл... Приму к сведению Ещё раз спасибо Да и вообще всем спасибо. Не ожидал увидеть так много комментариев. Приятного дня

Автор: Cheba 26.1.2006, 14:32

MPx, слезы тоже ни к чему. Смотри ссылку у меня в подписи.

Автор: Guedda 28.1.2006, 13:02

У меня идентичнй вопрос, только таблица должна быть width=100%: Есть три колонки: |Левая, width = 150px| Центр |Правая, width=150px| Как мне это реализовать? Попробовал через: Код <style>   td.mn   {     margin-left : 150px;     margin-right : 150px;   } </style> но ничего не получилось... Подскажите, пожалуйста.

Автор: Cheba 28.1.2006, 13:39

Ну, ты на верном пути. Все совершенно так же, только второй блок флоатиш по правую сторону, делаешь боковым колонкам свою ширину и отступы для третьего блока делаешь по обе стороны.

Автор: Guedda 28.1.2006, 13:44

Че то не понял, что Вы написали, не могли бы Вы код показать...

Автор: Cheba 28.1.2006, 14:54

Guedda, это плохо, что не понял... Код <!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Strict//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US"> <head>     <title>Centering div element</title>     <style type="text/css"> #col1 {     float: left;     width: 150px; /* ширина левой колонки */     background: #FF0; } #col2 {     float: right; /* штрина правой колонки*/     width: 150px; /* флоатим по правому краю */     background: #F80; } #col3 {     margin-left: 150px; /* отступ слева для центральной колонки */     margin-right: 150px; /* отступ справа для центральной колонки*/     background: #F00; }     </style> </head> <body>     <div id="col1">Content goes here</div>     <div id="col2">Content goes here</div>     <div id="col3">Content goes here</div> </body> </html>

Автор: Ciber SLasH 28.1.2006, 15:03

Код <table width="100%" border="1" style='table-layout: fixed'> <tr><td width="150">1</td><td>2</td><td width="150">3</td></tr> <tr><td>abcdefghijklmnopqrstuvwxyz0123456789</td><td>5</td><td>6</td></tr> </table>

Автор: Guedda 28.1.2006, 15:16

Спасибо.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)