2016-06-13 5 views
0

rowspanでこのテーブルを作成できますか?rowspanに10進数の行を作成する

|---------|---------| 
| 1  |4  | 
|---------|   | 
| 2  |---------| 
|---------|5  | 
| 3  |   | 
|---------|---------| 

2番目の列のすべての行は1.5?

私は...多分その可能な属性「高さ」との遊びや2番目の列内の別のテーブルを作成することを考えて

しかし、それだけROWSPANやCOLSPANとpossibbleのですか?

+0

それはpossible.Youは2列目の中にテーブルを作成する必要があります。 –

答えて

1

Rowsapnは整数でなければなりませんが、あなたが使用することができます

enter image description here

td { 
 
    border: 1px solid; 
 
    padding: 20px; 
 
}
<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td rowspan="2">4</td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="2">2</td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="2">5</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    </tr> 
 
</table>

+0

少し説明すれば助かります。コードはどのように機能しますか? – showdev

0

メインテーブルとサブテーブルの2つのテーブルを作成しました。メインテーブル内では、3行2列を作成しました。これらの3つはあなたの例では1、2、3です。そしてもう一方の列では、1つの列と2つの行を持つ別の小さなテーブルを作成しました。

<table border=1 width='200' height='100' cellpadding='0' cellspacing='0'> 
 
    <tr> 
 
    <td width='100'>&nbsp;</td> 
 
    <td rowspan="3"> 
 
     <table border='1' width="100" cellpadding='0' cellspacing='0' height='100%'> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
</table>

1

説明: rowspanを0.5などの10進値で設定することはできません。
したがって、0.5が1になり、1.5が効果的に3になるように、各セルの行スパンを2倍にします。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    table, 
 
    th, 
 
    td { 
 
     border: 1px solid black; 
 
     border-collapse: collapse; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <table> 
 
    <tbody> 
 
     <!-- ROW 1 --> 
 
     <tr> 
 
     <td rowspan="2">1</td> 
 
     <td rowspan="3">4</td> 
 
     </tr> 
 

 
     <!-- ROW 2 --> 
 
     <tr> 
 
     </tr> 
 

 
     <!-- ROW 3 --> 
 
     <tr> 
 
     <td rowspan="2">2</td> 
 
     </tr> 
 

 
     <!-- ROW 4 --> 
 
     <tr> 
 
     <td rowspan="3">5</td> 
 
     </tr> 
 

 
     <!-- ROW 5 --> 
 
     <tr> 
 
     <td rowspan="2">3</td> 
 
     </tr> 
 

 
     <!-- ROW 6 --> 
 
     <tr> 
 
     </tr> 
 

 

 
    </tbody> 
 
    </table> 
 

 

 
</body> 
 

 
</html>

関連する問題