- 締切済み
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>
- Qo Qoo（@ekekojr）
- お礼率56% (483/861)
- CSS
- 回答数1
- ありがとう数11
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ONEONE
- ベストアンサー率48% (279/575)
ヘッダー部を縦書きにするとは具体的にどういうことでしょうか？
関連する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
- 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
- JSFタグ<h:dataTable>でヘッダのcolspan
お世話になります。 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>で管理するので、このようなことはできないような気がしていますが、なにか方法ありませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- Java
- FIREFOXでのテーブル表示崩れについて
お世話になります。 レイアウト崩れについて質問させて頂きます。 現在下記のようにしています。 IE9、Safari、Chromeでは問題ないのですが、FireFoxで見た時に添付画像の用になってしまいます。いろいろ試してみたのですが、原因がわかりません。 この現象の原因が思い当たる方いましたらアドバイスをください。 HTML <table class="list"> <thead> <tr> <td>テスト</td> </tr> <tr> <th class="tdptn100">Line1</th> <th class="tdptn100">Line2</th> <th class="tdptn380">Line3</th> <th class="tdptn100">Line4</th> <th class="tdptn100">Line5</th> <th class="tdptn50">Line6</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> CSS table.list { width: auto; border: 2px solid #000; border-collapse: collapse; margin-left: auto; margin-right: auto; } .list th { font-size: 60%; } .list td { font-size: 60%; display:block; }
- ベストアンサー
- HTML
- マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
- table 幅指定でtheadとtbodyがずれる
bootstrapを使っているのですが、 個別に幅設定がしたいので、htmlに下記を追加しました。 theadは問題なく幅設定できているのですが、tbodyがうまく適用されていないようで theadとずれてしまいます。 theadとtbodyの幅を合わせるにはどのようにすれば良いでしょうか？ <style type="text/css"> .scroll1 { width: 1600px; table-layout: fixed; } .scroll1 thead, .scroll1 tbody { float: left; } .scroll1 tbody { height: 350px; overflow-y: scroll; } .c1 { table-layout: fixed;width: 200px; } .c2 { table-layout: fixed;width: 100px; } .c3 { table-layout: fixed;width: 100px; } .c4 { table-layout: fixed;width: 200px; } .c5 { table-layout: fixed;width: 200px; } .c6 { table-layout: fixed;width: 200px; } .c7 { table-layout: fixed;width: 100px; } .c8 { table-layout: fixed;width: 250px; } .c9 { table-layout: fixed;width: 250px; } </style> <table class="table table-bordered table-striped"> <tr> <td> <table border="0" class="table table-bordered table-hover table-striped table-hgroup scroll1"> <thead> <tr style=""> <th class="c1">アクション</th> <th class="c2">店舗コード</th> <th class="c3">ユーザID</th> <th class="c4">ユーザパスワード</th> <th class="c5">ユーザ名</th> <th class="c6">メールアドレス</th> <th class="c7">管理権限</th> <th class="c8">更新日</th> <th class="c9">登録日</th> </tr> </thead> <tbody> <tr style=""> <td style="width:200px;table-layout:fixed"> <input type="submit" value="削除" /> <input type="submit" value="編集" /> </td> <td style="width:100px;table-layout:fixed"> <span >2697</span> </td> <td style="width:100px;table-layout:fixed"> <span >002</span> </td> <td style="width:200px;table-layout:fixed"> <span >000000</span> </td> <td style="width:200px;table-layout:fixed"> <span >大築</span> </td> <td style="width:100px;table-layout:fixed"> <span ></span> </td> <td style="width:100px;table-layout:fixed"> <span >0</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:39</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:48</span> </td> </tr> </tbody> </table> </td> </tr> </table>
- ベストアンサー
- CSS
- dataTablesのテーブルの内容がずれる
3ステップで表をソート＆値を検索できるjavascript「dataTables」 http://www.skuare.net/test/jdatatables.html 上記サイトのjavascriptを使いソートで並べ替えることはできましたが、 <thead> <tr> (1) <th>Rendering engine</th> (2) <th>Browser</th> (3) <th>Platform(s)</th> (4) <th>Engine version</th> (5) <th>CSS grade</th> </tr> </thead> <tbody> <tr class="oddA"> (1) <td>Gecko</td> (2) <td>Firefox 1.0</td> (3) <td>Win 98+ / OSX.2+</td> (4) <td class="center">1.7</td> (5) <td class="center">A</td> </tr> （略）※trがtbodyに10個ほど入ります </tbody> <thead>の見出し部分の番号が <tbody>部分の番号と同じ並びになるはずなのですが、 (1)(2)(3)(4)(5)ではなく、 (4)(3)(2)(1)(5)となってしまいます。 http://sprymedia.co.uk/dataTables/example_alt_pagination.html ↑は上記解説サイトの元々のサイトなのですが、 こちらのhtmlのソースの<tbody>部分の<td>も(1)～(5)と順番に記述されています。 これだけでは情報不足とは思いますが、 ここを変えたら直るかもしれないなどありましたら教えていただけないでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- テーブルの背景をマウスオーバーで変える
お世話になります よろしくお願いします phpMyAdminをみてやってみようと思ったのですが テーブルのセルをマウスオーバーで背景の変更はできないでしょうか？ FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが 実際phpMyAdminでは動いています。 どうやれば一緒のことができるのでしょうか？ phpMyAdminからそれっぽいソースは見つけたのですが うまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします
- ベストアンサー
- HTML
- TABLEのマスの増やし方
HTMLのテーブル？について教えて下さい。 ******************************************************************************************************************************* <TABLE class=table_a style="WIDTH: 100%"> <TBODY> <TR> <TD class=table_a_th2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR> <TR> <TD class=table_a_th2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR> <TR> <TD class=table_a_th2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR></TBODY></TABLE> ******************************************************************************************************************************* という記載で、縦3列横3列の表が出来るのですが 表の内容（枠組み）を変更する方法が分かりません。 *********************************************************** <TABLE class=table_a style="WIDTH: 100%"> <TBODY> <TR> <TD class=table_a_th2 rowSpan=2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td> <P>右列<BR class=first-child>右列</P> <P>右列</P></TD></TR> <TR> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR> <TR> ************************************************************* 作成したいのはこのようなイメージのもので 中列と右列を増やして行きたいのです。 どなたか詳しいかたご教授下さい。
- ベストアンサー
- HTML
- JS テーブルのアニメーション表示
JavaScript テーブルのアニメーション表示 ここに１つのテーブルがあります。 「すべて表示」にチェックを入れたら、すべての列を表示します。 「３大栄養素」にチェックを入れたら、３大栄養素の列だけ表示します。 次の仕様を満たすには、どのようなコードになりますか？ ＜仕様＞ ・「３大栄養素」は表の項目セルに「S３」クラスを付与 ・チェックボックスで列の表示制御をする ・表示・非表示はスライド・アニメーション ［HTML］ <div class="container"> <form name="form2"> <label><input name="check2" type="checkbox">３大栄養素</label> </form> <table id="tbl3"> <caption>イチジクの栄養価</caption> <thead> <tr> <th>状態</th> <th>エネルギー</th> <th>水分</th> <th class="S3">たんぱく質</th> <th class="S3">脂質</th> <th class="S3">炭水化物</th> <th>灰分</th> <th>飽和脂肪酸</th> <th>不飽和脂肪酸</th> <th>コレステロール</th> <th>食物繊維</th> </tr> </thead> <tbody> <tr> <th>生</th><td>54 kcal</td><td>84.6g</td><td>0.6g</td> <td>0.1g</td><td>14.3g</td><td>0.4g</td><td>0.02g</td> <td>0.07g</td><td>0</td><td>1.9g</td> </tr> </tr> <th>乾</th><td>291 kcal</td><td>18.0g</td><td>3.0g</td> <td>1.1g</td><td>75.3g</td><td>2.5g</td><td>0.17g</td> <td>0.60g</td><td>0</td><td>10.7g</td> </tr> </tbody> </table> </div>
- 締切済み
- JavaScript
