Высота ячейки таблицы

RegEditor · March 14, 2011

Всем день добрый. Глупый вопрос: есть таблица - три столбца и три строки, я объединяю второй столбец на все три строчки. В этот второй столбец помещается большой по высоте контент, высота заранее неизвестна. Как мне выставить высоту первой и третьей строчки? Ни в какую не хочет. Заранее спасибо! Простейший код, имитирующий данную ситуацию:

<html>
<body>
<table border="1">
<tr height="15">
  <td width="100">1</td>
  <td width="100" rowspan="3">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br></td>
  <td width="100">3</td>
</tr>
<tr>
  <td>a</td>
  <td>b</td>
</tr>
<tr height="15">
  <td>c</td>
  <td>d</td>
</tr>
</table>
</body>
</html>

theo_ · March 14, 2011

Можно попробовать для td задать height

Но гораздо надежнее будет содержимое каждой ячейки нужной строки обернуть в div с указанной высотой

Justnewone · March 14, 2011

Давно не оформлял таким образом таблицы, но попробуйте высоту писать через css и назначать непосредственно TD а не TR

RegEditor · March 14, 2011

увы, даже если совместить и CSS и атрибуты тегов - по нулям

к примеру, если последнюю строчку заменить на

<tr height="15" style="height: 15px;">
  <td height="15" style="height: 15px;">c</td>
  <td height="15" style="height: 15px;">d</td>
</tr>

то ничего не поменяется

Можно попробовать для td задать height
Но гораздо надежнее будет содержимое каждой ячейки нужной строки обернуть в div с указанной высотой

а какой смысл оборачивать? задача ведь не в том, что ячейка слишком маленькой высоты, а наоборот - нужно чтобы две ячейки были фиксированной высоты, а третья болталась.

Justnewone · March 14, 2011

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

RegEditor · March 14, 2011

Бывает преподносят, да, но с таким сюрпризом на ровном месте я почему-то за все годы работы с вебом не сталкивался.

RegEditor · March 14, 2011

Справедливости ради, сейчас во всех браузерах проверил, в FF работает, в остальных нет - в IE8 по высоте три ячейки почти одинаковы получаются (вообще необъяснимо), в хроме и опере тоже неплохо - верхние две строчки получаются на высоту символа, а третья - огромная.

Народ, помогите, пожалуйста

Int · March 14, 2011

Три года назад с похожей задачей мучился. Плюнул тогда на неё и сделал по-другому как-то.

psywalker · March 15, 2011

RegEditor

А нет желания проделать всё тоже самое, только на слоях?

И вообще, расскажи, почему ты сделал выбор в пользу таблиц в данной ситуации?

RegEditor · March 15, 2011

RegEditor
А нет желания проделать всё тоже самое, только на слоях?
И вообще, расскажи, почему ты сделал выбор в пользу таблиц в данной ситуации?

Ситуация следующая, имеем полурезиновый дизайн, т.е. в данном случае средний столбик - это собственно сам сайт, а справа и слева от него идет фон, деленный на три части.

Итак, у всего сайта есть фон (коричневый стол), типа "на этом столе" лежит папка, которая имеет изменяющуюся высоту, а слева (там, где фон) она должна в уголках закругляться, чтобы был виден основном коричневый фон.

Чтобы было понятнее, скрин

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

Может быть, я просто не понимаю как это сделать.

Хотел сделать на слоях вложенными слоями, т.е. у одного фоном был бы основной фон папки, у другого - верхнее закругление, у третьего - нижнее. Но в таком вариант под закруглением вылезает основной фон папки, а текстуру стола не угадать.

psywalker · March 15, 2011

Погоди, но у тя на рисунке я вижу слева фон, а справа сайт, так? А где тогда средняя колонка?

А есть возможность показать скниншот того, что должно в итоге получится?

RegEditor · March 15, 2011

Погоди, но у тя на рисунке я вижу слева фон, а справа сайт, так? А где тогда средняя колонка?
А есть возможность показать скниншот того, что должно в итоге получится?

Не совсем. На этой картинке расчертил собственно саму табличку, о которой идет речь. То есть левая часть папки видна не всем, а только обладателям больших мониторов, у остальных она просто обрезается. Ячейки 1 и 3 вместо высоты в 40 пикселей становятся в треть экрана, в этом и проблема.

Единственно, что криво заскриншотил, вообще слева и справа колонки одинаковой ширины. Но это в общем-то неважно

Edited March 15, 2011 by RegEditor

psywalker · March 15, 2011

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

1. Сайт фиксированной ширины.

2. Ячейки 1 и 3 всегда должны быть вверху и внизу. Т.е. это как бы уголки. Как бы полоски по 40пк в высоту. Тянутся на всю ширину сайта полоской в 40пк в высоту.

3. Ячейка 2 - это сам сайт, он должен тянуться в высоту, если содержимого много по высоте. При этом ячейки 1 и 3 всё равно должны оставаться на своих местах.

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

5. А сайт вообще прижат к левому краю?

Поправь меня, если я где то ошибся.

RegEditor · March 15, 2011

Ага, т.е. смотри, как я понял задачу.
1. Сайт фиксированной ширины.
2. Ячейки 1 и 3 всегда должны быть вверху и внизу. Т.е. это как бы уголки. Как бы полоски по 40пк в высоту. Тянутся на всю ширину сайта полоской в 40пк в высоту.
3. Ячейка 2 - это сам сайт, он должен тянуться в высоту, если содержимого много по высоте. При этом ячейки 1 и 3 всё равно должны оставаться на своих местах.
4. Левая часть папки-сайта, должна заезжать за левую границу экрана. А когда ширина экрана большая, то она выезжает и сайт выравнивается по середине.
5. А сайт вообще прижат к левому краю?
Поправь меня, если я где то ошибся.

Ошибся немного, а точнее, я плохо объясняю)

1. Сайт фиксированной ширины, если конкретнее - 1000px.

2. Полоски, но тянутся они только в ячейках 1 и 3, не выходя правее.

3. Сам сайт - это большая объединенная ячейка, только сейчас понял, что забыл ее объединить на картинке Это ячейка, в к-й надпись сайт + ячейка сверху от нее + ячейка снизу; в этом как раз вся сложность, я не могу разделить средний столбец на три ячейки, иначе бы проблемы не было...

4. Левая часть папки, на которой никакого контента не будет (ячейки 1, 2, 3) уезжает за экран, все верно.

5. Нет, сайт изначально выравнивается по середине, ширина левого и правого столбца одинаковая.

Justnewone · March 15, 2011

Если притомитесь на таблице делать такой лейаут, то дивами будет несколько проще.

Делать не буду, по крайней мере сейчас точно.

Скажу только, что фанеру надо пустить на главный фон, например у HTML, нижний фланец деревяшки на BODY, затем дело техники, если нужно чтобы сразу, при недостатке контента, простроченный бекграунд был до самого низа - нижняя его часть в растягивающийся во всю высоту экрана DIV (тут на форуме найдите "Футер, прижатый к низу"), с верхушкой думаю понятно.

psywalker · March 15, 2011

del

RegEditor · March 15, 2011

Если притомитесь на таблице делать такой лейаут, то дивами будет несколько проще.
Делать не буду, по крайней мере сейчас точно.
Скажу только, что фанеру надо пустить на главный фон, например у HTML, нижний фланец деревяшки на BODY, затем дело техники, если нужно чтобы сразу, при недостатке контента, простроченный бекграунд был до самого низа - нижняя его часть в растягивающийся во всю высоту экрана DIV (тут на форуме найдите "Футер, прижатый к низу"), с верхушкой думаю понятно.

То, о чем Вы говорите - это реализация только одного фона (темный). А светлый должен идти до определенной ширины сайта, потом закругляться (что достигается разбиением на три части как раз - верхняя узкая, высотой 40 пикселей, нижняя тоже узкая, а средняя занимает все оставшееся пространство). И все это находится на темном фоне, т.е. под закруглениями его должно быть видно. К сожалению, все не так просто как кажется...

Колос · March 15, 2011

RegEditor

Что у тебя с доктайпом?

RegEditor · March 15, 2011

RegEditor
Что у тебя с доктайпом?

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

Колос · March 15, 2011

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

Не указан - это плохо. Могут быть и другие косяки, причём в разных обозревателях разные.

RegEditor · March 15, 2011

Не указан - это плохо. Могут быть и другие косяки, причём в разных обозревателях разные.

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

Serlutin · March 15, 2011

То, о чем Вы говорите - это реализация только одного фона (темный). А светлый должен идти до определенной ширины сайта, потом закругляться (что достигается разбиением на три части как раз - верхняя узкая, высотой 40 пикселей, нижняя тоже узкая, а средняя занимает все оставшееся пространство). И все это находится на темном фоне, т.е. под закруглениями его должно быть видно.

Ну и что вам мешается сделать 3, 4 или 5 (или 10 сколько понадобиться) вложенных дивов с фоном. Нужно блоки для верхней, нижней, 2 боковых и фона папки. И ещё один добавляем для контента. Итого 6 блоков вложенных друг в друга. Не так страшно, как кажется.

P.S. Возможно скоро прийдёт Светлана и скажет, что куча дивов прошлый век и нужно использовать Multiple backgrounds, а в ie делать через экспрешны. Типа вот так:

/* для IE */
.backG {
background: url(img/bg-1.gif) bottom left no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/bg-2.gif', sizingMethod='crop');
}
/*Обращение к тому же блоку только более точно. IE будет игнорировать неизвестные ему свойства во втором обращение и использовать первое.*/
div.backG {
background: url(img/bg-1.gif) bottom left no-repeat, url(img/bg-2.gif) top left no-repeat;
}

Вот примерчик накидал: http://serlutin.nxt.ru/example/multiplebg.html

Edited March 15, 2011 by Serlutin

RegEditor · March 15, 2011

Ну и что вам мешается сделать 3, 4 или 5 (или 10 сколько понадобиться) вложенных дивов с фоном. Нужно блоки для верхней, нижней, 2 боковых и фона папки. И ещё один добавляем для контента. Итого 6 блоков вложенных друг в друга. Не так страшно, как кажется.
P.S. Возможно скоро прийдёт Светлана и скажет, что куча дивов прошлый век и нужно использовать Multiple backgrounds, а в ie делать через экспрешны. Типа вот так:
/* для IE */
.backG {
background: url(img/bg-1.gif) bottom left no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/bg-2.gif', sizingMethod='crop');
}
/*Обращение к тому же блоку только более точно. IE будет игнорировать неизвестные ему свойства во втором обращение и использовать первое.*/
div.backG {
background: url(img/bg-1.gif) bottom left no-repeat, url(img/bg-2.gif) top left no-repeat;
}
Вот примерчик накидал: http://serlutin.nxt.ru/example/multiplebg.html

Мешает вот что. Грубо говоря, будем считать, что у нас белый фон. На этот белый фон помещается два бэкграунда, один на всю высоту сайта, а второй - в самом верху, делающий закругление.

Один фон:

XXXXXX

Второй:

XXXX

XXXXX

XXXXXX

Задача в том, чтобы в этом месте закругления у второго фона (или картинки, неважно) было видно белый фон, а не первый. А два бэкграунда дают то, что в этом месте будет видно первый фон.

P.S. за мультибэкграунды спасибо, про такую технологию не знал, делал обычно вложенными дивами)

Edited March 15, 2011 by RegEditor

Serlutin · March 15, 2011

Ну тогда делайте их не вложенными

div+(div>div>div>div)+div

Edited March 15, 2011 by Serlutin

RegEditor · March 15, 2011

Ну тогда делайте их не вложенными
div+(div>div>div>div)+div

Теперь не понял. Мне нужно, чтобы все три слоя были нефиксированной ширины и менялись при изменении размера экрана, и при этом чтобы один был сверху, третий - внизу, второй - на оставшуюся высоту. Как это сделать дивами?..

Sign In

Высота ячейки таблицы

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information