Относительная высота стола с размахом строк - PullRequest
Новая
       0

Относительная высота стола с размахом строк

1 голос
/ 16 марта 2012

Может ли кто-нибудь помочь мне установить относительные максимумы для всей моей таблицы?Пожалуйста, взгляните на мою скрипку .

Некоторые пояснения о том, чего я хочу достичь:

  • Ячейка 1 должна иметь высоту 40%от общей высоты стола (= 200px)
  • Ячейка 2 должна иметь высоту 30% от общей высоты ячейки 1 (= 60px)
  • Ячейка 3 должна иметь высоту 70%от общей высоты ячейки 1 (= 140 пикселей)
  • высота ячейки 4 должна составлять 60% от общей высоты стола (= 300 пикселей)
  • высота ячейки 5 должна составлять 20%от общей высоты ячейки 4 (= 60 пикселей)
  • высота ячейки 6 должна составлять 40% от общей высоты ячейки 4 (= 120 пикселей)
  • высота ячейки 7 должна составлять40% от общей высоты ячейки 4 (= 120 пикселей)

Все эти определения должны быть относительными.

Ответы [ 2 ]

0 голосов
/ 16 марта 2012

Обходной путь - рассчитать высоту для каждой из меньших ячеек, чтобы сделать ее относительно общей высоты:

  • Ячейка 2 должна иметь высоту 12% от общей высоты (= 60 пикселей)
  • Высота ячейки 3 должна составлять 28% от общей высоты (= 140 пикселей)
  • Высота ячейки 5 должна составлять 12% от общей высоты (= 60 пикселей)
  • Ячейка 6 должна иметь высоту 24% от общей высоты (= 120 пикселей)
  • Ячейка 7 должна иметь высоту 24% от общей высоты (= 120 пикселей)

Да, не идеально, но чисто растворение CSS.

Код: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>    
<table border="1">
    <tr style="height:12%">
      <th rowspan="2">Cell 1</th>
      <td>Cell 2</td>
    </tr>
    <tr style="height:28%">
      <td>Cell 3</td>
    </tr>
        <tr style="height:12%">
      <th rowspan="3">Cell 4</th>
      <td>Cell 5</td>
    </tr>
    <tr style="height:24%">
      <td>Cell 6</td>
    </tr>
    <tr style="height:24%">
      <td>Cell 7</td>
    </tr> 
</table>
</body>
</html>​

Демо: http://jsfiddle.net/5ZX7t/1/

0 голосов
/ 16 марта 2012

Вы можете попробовать это с помощью jQuery http://jsfiddle.net/prabhavithreddy/K4Q4H/

...