#html #css #html-table
#HTML #css #html-таблица
Вопрос:
У меня есть страница с таблицей, и я хочу, чтобы ее макет выглядел следующим образом:
------------ -------------- ----------------------------------
| 200px wide | 300px wide | Remaining width |
| 2 rows | 1 row | 1 row |
|Page height | | Height of image scaled to width |
| -------------- ----------------------------------
| | Remaining width |
| | Remaining height |
| | 1 row, 2 columns |
------------ -------------------------------------------------
Кажется, я могу заставить все работать, за исключением ограничения высоты таблицы высотой страницы. Как мне сделать высоту таблицы равной высоте страницы?
Вот пример страницы.
Я мог бы сделать это за две минуты с помощью jQuery, но я действительно не хочу использовать Javascript для выполнения чего-то такого простого.
РЕДАКТИРОВАТЬ: протестировано только в Firefox. Это может работать, а может и не работать в других браузерах.
Комментарии:
1. Я не говорю, что это облегчает вашу проблему, но вы не должны использовать таблицы для верстки.
2. Я думаю, вы могли бы упростить все это, используя поля div… вы можете задать высоту таблицы, используя это на вкладке таблица: style=»height:100%;»
3. Я думаю, что ваши требования содержат противоречие: если высота изображения всегда пропорциональна ширине ячейки, то возможно, что в широких неглубоких окнах браузера не остается места для нижней строки.
4. @NGLN Я приму любое поведение, если браузер меньше, чем изображение.
5. В каких браузерах это должно работать? (это выглядит как «только Firefox», но я просто перепроверяю)
Ответ №1:
Нравится это?
<table width="100%" height ="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200px" rowspan="2">amp;nbsp;</td>
<td width="300px">amp;nbsp;</td>
<td width="44%">amp;nbsp;</td>
</tr>
<tr>
<td colspan="2">amp;nbsp;</td>
</tr>
</table>