1. ホーム
  2. 質問と答え
  3. rowspanのあるテーブルの相対的な高さ

rowspanのあるテーブルの相対的な高さ

2012-03-16 9 views
1

誰かが私のテーブル全体の相対的な高さを設定するのを手伝ってもらえますか？私のfiddleを見てください。rowspanのあるテーブルの相対的な高さ

私が達成したいかについていくつかの説明：

  • セル1は、全テーブルの高さの40％の高さを持つべきである（= 200pxの）
  • セル2は、30％の高さを持っている必要がありますセル1の高さの合計（= 60px）
  • セル3の高さは、セル1（= 140px）の合計高さの70％にする必要があります。
  • セル4の高さは、テーブル全体の高さの60％ （= 300ピクセル）
  • セル5には、セル4の高さの20％（= 60px）
  • セル6の高さは、セル4（= 120px）の全高の40％です。
  • セル7の高さは40％セル4（= 120ピクセル）の全高さのうちの1つです。

このすべての矛盾は相対的でなければなりません。

ご協力いただきありがとうございます。

出典

2012-03-16 shub

答えて

0

仕事は周り全体の高さに、それは相対的にするために小さなセルの各々のための高さを計算することであるjQueryを使ってこれを試してみることができます。

  • セル2の高さを持っている必要があります
  • セル3の高さは、高さ（= 140px）の28％です。
  • セル5の高さは、全高（= 60px）の12％にする必要があります。
  • セル6は、（= 120ピクセル）
  • セル7は、全体の高さの24％の高さを有していなければならない全体の高さの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/

出典

2012-03-16 11:39:53 welldan97

関連する問題

 関連する問題