JSFタグ<h:dataTable>でヘッダのcolspan

2023/08/03 14:27

このQ&Aのポイント

JSFの<h:dataTable>で、ヘッダをcolspanで結合する方法、さらにヘッダを2行にしたいのですが、可能でしょうか？
テーブル要素をカラム単位<h:column>で管理するので、このようなことはできないような気がしていますが、なにか方法ありませんでしょうか。
以下のようなhtmlを生成したいのです。 <table border="1"> <thead> <tr> <th colspan="2" scope="colgroup">May</th> <th colspan="2" scope="colgroup">June</th> </tr> <tr> <th>name</th> <th>flag</th> <th>name</th> <th>flag</th> </tr> </thead> <tbody> <tr> <td>5A</td> <td>B</td> <td>6A</td> <td>D</td> </tr> <tr> <td>7B</td> <td>B</td> </tr> </tbody> </table>

ベストアンサー

JSFタグ<h:dataTable>でヘッダのcolspan

2006/08/04 17:04

お世話になります。 JSFの<h:dataTable>で、ヘッダをcolspanで結合する方法、さらにヘッダを2行にしたいのですが、可能でしょうか？以下のようなhtmlを生成したいのです。 <table border="1"> 　<thead> 　　<tr> 　　　<th colspan="2" scope="colgroup">May</th> 　　　<th colspan="2" scope="colgroup">June</th> 　　</tr> 　　<tr> 　　　<th>name</th> 　　　<th>flag</th> 　　　<th>name</th> 　　　<th>flag</th> 　　</tr> 　</thead> 　<tbody> 　　<tr> 　　　<td>5A</td> 　　　<td>B</td> 　　　<td>6A</td> 　　　<td>D</td> 　　</tr> 　　<tr> 　　　<td>7B</td> 　　　<td>B</td> 　　</tr> 　</tbody> </table> テーブル要素をカラム単位<h:column>で管理するので、このようなことはできないような気がしていますが、なにか方法ありませんでしょうか。よろしくお願いいたします。

noname#60875

Java
回答数1
ありがとう数3

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

chaoruko
ベストアンサー率53% (7/13)

2006/08/04 17:33 回答No.1

いろいろやってみましたができないっぽかったです外はcolums=2 でつくって h:column のなかで h:panelGrid をつかったりしていますでもスタイルシートなどで長さを指定しないといけないのでむずかしいというか面倒くさいかんじです

関連するQ&A

tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですがうまくいきません。条件は以下のとおりです。　・width: ?%として大きさを可変にする。　・ヘッダを固定する。　・ボディにはスクロールバーをつけるこれまでwidthは固定で作成してきたのですが可変にする場合どのようなcssにすればよいのでしょうか。よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
tableヘッダーの縦書き
Bootstarapを利用しているのですが、Tableのヘッダー部を縦書きにするにはどのようにすれば良いでしょうか？ <h2>Bordered Table</h2> <div class="table-responsive"> <table class="table table-bordered table-hover"> <thead> <tr> <th>Page</th> <th>Visits</th> <th>% New Visits</th> <th>Revenue</th> </tr> </thead> <tbody> <tr> <td>/index.html</td> <td>1265</td> <td>32.3%</td> <td>$321.33</td> </tr> <tr> <td>/about.html</td> <td>261</td> <td>33.3%</td> <td>$234.12</td> </tr> <tr> <td>/sales.html</td> <td>665</td> <td>21.3%</td> <td>$16.34</td> </tr> <tr> <td>/blog.html</td> <td>9516</td> <td>89.3%</td> <td>$1644.43</td> </tr> <tr> <td>/404.html</td> <td>23</td> <td>34.3%</td> <td>$23.52</td> </tr> <tr> <td>/services.html</td> <td>421</td> <td>60.3%</td> <td>$724.32</td> </tr> <tr> <td>/blog/post.html</td> <td>1233</td> <td>93.2%</td> <td>$126.34</td> </tr> </tbody> </table> </div>
- 締切済み
- CSS
CSS+HTMLでTBODYスクロールさせたい
「複数行の見出し行（THEAD）で複数行のデータ行（TBODY）をスクロールさせたい」こんにちわ、HTML+CSSでご質問させていただきます。ターゲットは、IE7、IE8、IE9です。 http://javascript123.seesaa.net/article/303954410.html を参考に、見出し行固定、のデータスクロールテーブルを cssを使って実現しようと思ってます。上記URLのサンプルソースをそのままコピーして、 HTMLとして動かすと期待どおりの動きをいたします。そのサンプルソースの見出し行を複数行にしたく、以下のように修正いたしましたが、見出し行２行のうちの１行分しか表示されません。下記の様になります。 http://apooz.obata.tk/test.html 変更した箇所はtbodyの開始位置をヘッダーの高さ倍にしたかったので、 out_Div内のpadding-topを修正。あとは、”調査時期”というカラムをTHEADとTBODYに増やしました。 <tr> <th class="coL0" colspan="5">調査時期</th> </tr> 試行錯誤いろいろしましたが、着眼点が悪かったのか、スキル不足も手伝って、時間ばかり消化しております。何かヒントなる情報いただけると幸いです。宜しくお願い致します。 ------------------ソース　ここから------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS でヘッダ固定、データ行をスクロールさせるテーブル。</title> <style type="text/css">  </style> </head> <body> <div id="out_Div"> <div id="in_Div"> <table id="sclTbl">  <colgroup class="coL0"></colgroup> <colgroup class="coL1"></colgroup> <colgroup class="coL2"></colgroup> <colgroup class="coL1" span="2"></colgroup> <colgroup class="coL3"></colgroup> <thead> <tr> <th class="coL0" colspan="5">調査時期</th> </tr> <tr> <th class="coL0">Ｎo</th> <th class="coL1">都道府県</th> <th class="coL2">県庁所在地</th> <th class="coL1">人口</th> <th class="coL1">面積（ｋm2)</th> </tr> </thead> <tbody> <tr> <td align="center" colspan="5">2011年</td> </tr> <tr> <td>1</td> <td>北海道</td> <td>札幌市</td> <td>5,517,449</td> <td>78,420.61</td> </tr> ：（中略）： <tr> <td align="center" colspan="5">2011年</td> </tr> <tr> <td>10</td> <td>群馬県</td> <td>前橋市</td> <td>2,006,903</td> <td>6,363.16</td> </tr> </tbody> </table> </div> </div> </body> </html> ------------------ソースここまで------------------ 大変困ってます。助けてください。m(_ _)m
- 締切済み
- HTML
[table] colspanについて
画像添付にあるようなセル区切りのtableをhtmlで作成したいと考えています。 4列目にセルが４つあるので、3列目のcolspanの指定をどのように記述すればいいのか不明で困っています。 ---------------------------------------------------- <table> <tr> <th></th> <th colspan="3"></th> </tr> <tr> <td></td> <td colspan="3"></td> </tr> ▼▼▼▼▼この列のrowspanの指定がわからない▼▼▼▼▼ <tr> <td></td> <td></td> <td></td> </tr> ▲▲▲▲▲この列のrowspanの指定がわからない▲▲▲▲▲ <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> </table> ---------------------------------------------------- どなたか解決案をご存知の方、お教えいただけないでしょうか？ colspanにこだわっているわけではないので、cssで解決できるのであればcssでも大丈夫です。よろしくお願い致します。
- ベストアンサー
- HTML
罫表内の文字を選択された場合に変更するには
罫表内の一部の文字を選択し、"色変更"ボタンを押した場合に選択した文字の色を変更する事は出来ますでしょうか。例えば　下記Tableの右下のセルの"にぬね"という文字を選択し、ボタンを押すと選択した文字の色が赤に変わるというような事がしたいのです。 <table> <thead><tr><th>１</th><th>２< /th><th>３</th><th>４</th></tr>< /thead> <tbody> <tr td>あいうえお</td><td>かきくけこ</td></tr> <tr><td>さしすせそ</td><td>なにぬねの</td></tr> </tbody> </table> 何か方法ありますでしょうか。宜しくお願いします。
- ベストアンサー
- JavaScript
<table>の colspanについて
<table border=1> <tr><td colspan=2>aaaaaaaaaaaaaaaaa</td></tr> <tr><td colspan=2>aaaaaaaaaaaaaaaaaa</td></tr> <tr><td>aa</td><td>bb</td></tr> <tr><td colspan=2>aaaaaaaaaaaaaaaaaaaaaaaa</td></tr> </table> の３行目の（分割している）２つのセルの幅を自由に設定したいのですが、width=10%などといれてもうんともすんともしません。なにかいい方法ありますか？
- ベストアンサー
- HTML
検索機能とページ送りのできるテーブルの作成について
お世話になります <input type="text" name="search" id="search"> <table width="800" border="0" id="item" name="item"> 　<thead> 　　<tr> 　　　<th></th> 　　</tr> 　</thead> 　<tbody> 　　<tr> 　　　<td> 　　　　<a href="hoge.html"> 　　　　　<img src="hoge.jpg"> 　　　　</a> 　　　　<b>ほげ</b> 　　　</td> 　　</tr> 　　<tr> 　　　<td> 　　　　<a href="hogehoge.html"> 　　　　　<img src="hogehoge.jpg"> 　　　　</a> 　　　　<b>ほげほげ</b> 　　　</td> 　　</tr> 　</tbody> </table> ※本来はTR要素がもっと沢山増えます。このテーブルに対して表示件数が5件を超えたらページ送りができるようにし、テキストボックスの内容で検索をかけて表示をしたいのですが、何か良い解決案はありませんか？一応自分でもいろいろ調べて http://d.hatena.ne.jp/Rewish/20090703/1246615343 http://ponk.jp/?p=2413 を共存させるようとしてみたのですがどうもうまく動作しませんでした。
- 締切済み
- JavaScript
colspan を使用した際のIE7の動作
行き詰ってしまったのでこちらで質問させていただきます。テーブルで表を作成しているのですが、 colspanで指定したセルの中にinputを入れると急にIE7でレイアウトが崩れます。 IEの他のverでは大丈夫なのですが、7だけくずれてしまうのは何か回避策があるのでしょうか？ちなみに、下記のようなソースです。全体で8列とり、１行目は項目３つに対してそれぞれinputを入れる列があり、 2行目は項目２つでinputを入れる列があります。 1行目は3等分にしたく、2行目は2等分にしたい形です。何かほかに方法があるのでしょうか？ご教授いただければと思います。 <style type="text/css"> .test{border-collapse:collapse;} .test td,.test th{border:solid 1px #000;} </style> <table width="952" border="1" cellspacing="0" cellpadding="0" class="test"> <tr> <th width="80">項目1</th> <td width="235"><input name="" type="text" value="12345" /></td> <th width="80">項目2</th> <td colspan="3"><input name="" type="text" value="12345" /></td> <th width="80">項目3</th> <td width="235"><input name="" type="text" value="12345" /></td> </tr> <tr> <th>項目4</th> <td colspan="3"><input name="input2" type="text" value="12345" /></td> <th width="80">項目5</th> <td colspan="3"><input name="input3" type="text" value="12345" /></td> </tr> </table>
- ベストアンサー
- HTML
2つのテーブルの幅を一致させたい
以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
colspan セルの結合について
テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが縦線が消えてしまいます。何故なのか調べてもわからず困っています。ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>
- 締切済み
- HTML