Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Масштабируемая таблица


Автор: Keeper89 2.4.2010, 23:53
Доброго времени суток!

Имеется следующий шаблон веб-страницы:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>-</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</HEAD>
<body>

ТЕКСТ

<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td height="14"><img src="1.png"/></td>
    <td rowspan="5">МНОГО МНОГОСТРОЧНОГО ТЕКСТА</td>
  </tr>
  <tr height=50%>
    <td> <img src="2.png" height=100% /></td>
  </tr>
  <tr height="29">
    <td height="29"><img src="3.png"/></td>
  </tr>
  <tr height=50%>
    <td><img src="2.png" height=100% /></td>
  </tr>
  <tr height="14">
    <td height="14"><img src="4.png"/></td>
  </tr>
</table>

ТЕКСТ

</body>
</html>

Пытаюсь сделать 2 и 4 строку таблицы так, чтобы картинка растягивалась на все возможно место, остальные (1, 3, 5) сроки по высоте - такие как картинка внутри.

Подскажите, как можно реализовать это с помощью JavaScript? 

Автор: Onis 8.4.2010, 22:58
У вас в 1, 3, 5 строках строго задана высота, а Вы написали что высота должна быть как у картинок внутри. Это вводит в замешательство.

Автор: Keeper89 9.4.2010, 15:40
Чуть по-другому сделал:
Код

<table border="0" cellpadding="0" cellspacing="0">
  <tr style="height: 14px">
    <td style="background-image: url('1.png'); background-repeat: no-repeat;" width=25>&nbsp;</td>
    <td rowspan="5">ТЕКСТ</td>
  </tr>
  <tr style="height: 50%">
    <td style="background-image: url('2.png'); background-repeat: repeat-y;">&nbsp;</td>
  </tr>
  <tr style="height: 29px">
    <td style="background-image: url('3.png'); background-repeat: no-repeat;">&nbsp;</td>
  </tr>
  <tr style="height: 50%">
    <td style="background-image: url('2.png'); background-repeat: repeat-y;">&nbsp;</td>
  </tr>
  <tr style="height: 14px">
    <td style="background-image: url('4.png'); background-repeat: no-repeat;">&nbsp;</td>
  </tr>
</table>

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