下記実装があります。
html
1<table class="hoge"> 2 <tr> 3 <td colspan="3">hoge1</td> 4 <td colspan="5">huge1</td> 5 </tr> 6 <tr> 7 <td colspan="3">hoge2</td> 8 <td colspan="5">huge2</td> 9 </tr> 10 <tr> 11 <td colspan="3">hoge3</td> 12 <td colspan="5">huge3</td> 13 </tr> 14</table>
簡単なtableのレイアウトで
二列三行のテーブルが存在し、
それぞれ横幅が3:5の振り分けで
ただ今のHTMLの実装だとtdに対しすべてにcolspanを入力しなくてはならないので、
<tabel class="hoge">の直下に
html
1<table class="hoge"> 2 <colgroup span="1" colspan="3"><!-- 一列目の対応 --> 3 4 </colgroup> 5 <colgroup span="1" colspan="5"><!-- 二列目の対応 --> 6 7 </colgroup> 8 9 <tr> 10 <td>hoge1</td> 11 <td>huge1</td> 12 </tr> 13 <tr> 14 <td>hoge2</td> 15 <td>huge2</td> 16 </tr> 17 <tr> 18 <td>hoge3</td> 19 <td>huge3</td> 20 </tr> 21</table>
colgroupの要素のspanは
http://www.newcredge.com/IT/www/html/tag/table/table-colgroup.html
グループ化する列の数を指定する。
らしいですど、
ここでいうspanは一番最初のhtml内で指定しているのcolspanとは別で、
テーブルの列のことを指していますよね?
なので<colgroup span="1">は一列目に対して適応、
次いで<colgroup span="1">を記載した場合、2列目に適応されるのだと思います。
ただ、これだと1:1の割合のテーブルなので、
80pxのwidthを持つtdが二列できて終わりですので、
別途colgroupで分割した列にそれぞれどの割合で出すかという指定が必要になります。
単純に
html
1<colgroup span="1" style="width:60px;"><!-- 一列目の対応 --></colgroup> 2<colgroup span="1" style="width:100px;"><!-- 二列目の対応 --></colgroup>
でも出来るかもしれませんが、
<table class="hoge">のwidthが変更された場合自動で変わらないですし、 styleのWidthを%で指定する方法も考えましたが、 3/8が2.3333という無限小数なので、23% 77%とか切り捨てた指定はしたくありません。かといって
colgropuに対しての何らかの処理を施し、
最初に記載したHTMLのレイアウトの形にもできずに困っています。
わかるかたいらっしゃいますか。
お願いします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/23 00:36