- ベストアンサー
表（テーブル）内の文字サイズ一括変換
<table>タグ内の文字サイズを一括して変換させたくて、 Q.No1470163の質問（2005年6月24日投稿のものです）に対する解答No.6とNo.1を参考に（というかNo.6を殆どコピペして）、表を作ってみました。 地の分より表内の文字を小さくしたかったのですが、Netscape7とFirefox3はうまく小さくなりましたがIE6では文字サイズが変わりません。 ちなみにcssの指示は↓と書きました。 <style type="text/css"> <!-- #sidTable001 tr{font-size: small;} --> </style> どうすればIEでもうまく小さくなるでしょうか？お教え下さい。 なお、当方、初心者です。お手数ですが専門的になるとお手上げなので簡単な方法でお願いします。 ↓以下はQ.No1470163の質問（2005年6月24日投稿のものです）に対する解答No.6の一部引用です。 例示。 <table id="sidTable001" class="sclTable000"> <colgroup> <col id="sidCol001" class="sclCol000"> <col id="sidCol002" class="sclCol000"> </colgroup> <tr id="sidTr001" class="sidTr000"> <td id="sidTd011" class="sclTd001">左側０１</td> <td id="sidTd012" class="sclTd002">右側０１</td> </tr> <tr id="sidTr002" class="sidTr000"> <td id="sidTd021" class="sclTd001">左側０２</td> <td id="sidTd022" class="sclTd002">右側０２</td> </tr> </table> 上記 HTML に対して 全セルに対して : tr{ ～ ;} このテーブルに限った全セルに対して : #sidTable001 tr{ ～ ;} 左側０１，右側０１に対して : #sidTr001 tr{ ～ ;} 左側０１，左側０２に対して : tr.sclTd001{ ～ ;} 左側０１だけに対して : tr#sidTd011{ ～ ;} 尚、左側０１，右側０２に対して : tr#sidTd011, tr#sidTd022{ ～ ;} の様な複数の指定も出来ます。 （CLASS で同じCLASS名を付ける方をお勧めしますが、一応技術的に出来るという事で例示をしました。） 回答者：koutarou504さま
- mu_minmin
- お礼率89% (97/108)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
これだけで良いのでは？ <style type="text/css"> <!-- .aaa td{font-size: 0.8em;} --> small は、ブラウザ任せのサイズですので 0.8em とかで良いのでは？ 数値を変更して調整。 <table class="aaa"> <tr> <td>左側０１</td> <td>右側０１</td> </tr> <tr> <td>左側０２</td> <td>右側０２</td> </tr> </table>
その他の回答 (3)
- DrFell
- ベストアンサー率55% (305/551)
<style type="text/css"> <!-- #sidTable001 tr{font-size: small;} /*←この行*/ --> </style> ここの「tr{}」を「td{}」に変更すればIE6でも小さくなるはずです。お試しを。
お礼
ご教授ありがとうございました。
- idhokanohi
- ベストアンサー率45% (9/20)
今頭回らないので質問をあまり理解できていませんが class="class1 class2 class3"のように半角スペースで区切って複数指定できます。 またCSSは例えば .class1 {color:#FF0000;} .class1 {color:#0000FF;} となっていた場合、二つしていすると後の方のが優先されます。 こういったものを利用すればできるんじゃないかな。
お礼
ご教授ありがとうございました。
- outbrave
- ベストアンサー率60% (231/380)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 標準モードで作成する方法もあると思います。
お礼
ご教授ありがとうございました。
関連するQ&A
- 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"> <!-- #sclTbl { /* スクロール対象のテーブル */ background-color: #fff; /* テーブルの背景色 borderの色になる */ border-collapse:separate; /* 枠線の表示の仕方 */ font-size: 16px;/* 文字のサイズ */ } #out_Div { /* 全体の枠。ここにヘッダを格納 */ position: relative; /* 相対位置 */ padding-top: 52px; /* #in_Div の開始位置 */ width: 480px; /* 列幅の合計＋セル間の幅(2px)の合計＋20px 程度 */ border: 1px solid #0099cc; /* 外枠 */ background-color: #fff; /* 白 */ } #in_Div {/* tbodyが入っている。ここがスクロール対象*/ overflow: auto; /* スクロールバー*/ height: 133px; /* tbodyを表示する高さ */ } #sclTbl thead tr {/* ヘッダ 見出し行,位置を #out_Div の左上端に移動 */ position: absolute; /* 絶対位置 */ top: 0px; /* 上からの位置 */ left: 0px; /* 左からの位置 */ background-color: #fff; } #sclTbl thead tr th{/* thead 'th'のスタイル */ background-color: #0099cc; /* 背景色 */ color: #fff; /* 文字色 */ padding: 3px 0px; } #sclTbl tbody tr td{/* tbody 'td'のスタイル */ background-color: #dcdcdd; color: blue; padding: 3px 6px; } .coL0 { width: 30px; }/* colgroupの列幅指定 */ .coL1 { width: 100px; } .coL2 { width: 120px; } --> </style> </head> <body> <div id="out_Div"> <div id="in_Div"> <table id="sclTbl"> <!--colgroup tableの列をグループ化し、列幅指定--> <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
- テーブルタグ表示が上手くいかない（html・CSS
下のタグを使うと、ブログに下記画像上部のように表示されているのですが 理想としては画像の下部分のように綺麗に表示したいです。 自分なりに何度かタグを弄っているのですが何度やっても画像上部のように乱れて表示されてしまい ムキー！っとなってます。 大変申し訳ないのですが、画像の下部分のように表示できるタグを教えてください。 何卒お願いします。 画像内のピンクの部分は実際には<img src="で指定された画像になります。 使ったタグ <table border="1"> <td><table id="table-03"> <colgroup> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV>
- ベストアンサー
- ブログ
- 表の1列だけをCSSを使って右揃えにするには？
XHTMLとCSSを使ってホームページを作成中の初心者です。 表の中のデータを中央揃えにするのですが、ある1つの列の文字だけは全て右揃えにしたいのです。 A-1 B-1 C-1 A-2 B-2 C-2 A-3 B-3 C-3 という表があったとすると、この中の「C-1、C-2、C-3」は右揃え、他の部分は中央揃えにしたいのです。 もし、表の中のデータ全てを中央揃えにするのであれば、ソース部分は <table class="test"> <colgroup span="1" id="test-a"></colgroup> <colgroup span="1" id="test-b"></colgroup> <colgroup span="1" id="test-c"></colgroup> <tbody> <tr><td>A-1</td><td>B-1</td><td>C-1</td></tr> <tr><td>A-2</td><td>B-2</td><td>C-2</td></tr> <tr><td>A-3</td><td>B-3</td><td>C-3</td></tr> </tbody> </table> のような感じで、CSS部分は table.test td {text-align: center} というようにすればよいかと思います。 また、個別に指定するのであれば、ソース部分は <tbody> <tr><td class="c">A-1</td><td class="c">B-1</td><td class="r">C-1</td></tr> <tr><td class="c">A-2</td><td class="c">B-2</td><td class="r">C-2</td></tr> <tr><td class="c">A-3</td><td class="c">B-3</td><td class="r">C-3</td></tr> </tbody> のような感じで、CSS部分は td.c {text-align: center} td.r {text-align: right} でも良いかと思います。 ただ、データの量が多く、全てのセルに対して <td class="c"> <td class="r"> 等の指定をすることは非常に大変です。 列ごとに横幅の指定をするときなどはCSS部分で colgroup#test-c {width: 20px} 等のようにすると思いますが、例えば、この colgroup#test-c 等を利用してCの列は右揃え、他の列は中央揃えにする方法をご教示お願いします。
- ベストアンサー
- CSS
- 特定の列の<td>または<th>だけにスタイルを
かけたいということがあります。 例えば、 ---------------------------------------------------------- <style type="text/css"> .tab1 th, .tab1 td { font-weight:normal; text-align:center; background:#fee; } .tab1 .row2 th { /* ----------------(1) */ background:#fff; } .tab1 .col2 th { /* ----------------(2) */ background:#ffff; } </style> <table class="tab1"> <col class="col1"> <col class="col2"> <col class="col3"> <tr class="row1"> <th>1</th> <th>2</th> <th>3</th> </tr> <tr class="row2"> <th>4</th> <td>5</td> <td>6</td> </tr> <tr class="row3"> <th>7</th> <td>8</td> <td>9</td> </tr> <table> ---------------------------------------------------------- だと、 1 2 3 4 5 6 7 8 9 の中の「4」は(1)により背景が白くなります。 しかし、(2)のようにしても「2」の背景は白くなりません。 <col>ってそういうものなのでしょうか？ <td>または<th>にidをつけてスタイルをかけるしかないのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- Tableタグ内のspan styleが適応されない
先日ブログを開設して、表を作りたかったのでtableタグを使ったのですが、表中の文字が何故か10ptにならず、およそ15ptくらい大きくなってしまいます。 どこかスタイルシート（HTML?)がおかしいのでしょうか？ 詳しい方、ご教授の程お願いいたします。 下記の様に設定しました。 <table border="1" cellpadding="0" cellspacing="0" width="430"><colgroup> <col align="center"><col span="5" align="center"> <span style="font-size:10pt;"><tr><th>・・・ ・・・</td></tr></span></col></colgroup></table>
- ベストアンサー
- HTML
- このような表をもっとスッキリさせるには？
<table bgcolor="#000000" table style="font-size:12px" cellspacing="1" cellpadding="5" width="500" height=""> <colgroup width="20%"> <colgroup width="30%"> <colgroup width="50%"> <tr><td bgcolor="#FFFF00">あああ</td><td bgcolor="#FFFFFF">ああああ</td><td bgcolor="#FFFFFF">あああああ</td></tr> <tr><td bgcolor="#FFFF00">いいい</td><td bgcolor="#FFFFFF">いいいい</td><td bgcolor="#FFFFFF">いいいいい</td></tr> <tr><td bgcolor="#FFFF00">うううう</td><td bgcolor="#FFFFFF">うううう</td><td bgcolor="#FFFFFF">ううううう</td></tr> </table> ↑こんな感じで表を作っています。 【bgcolor="#FFFFFF"】のようなものがやたらに多いので、CSSを使ってもっとスッキリさせたいのですがどうCSSタグを配置したらよいのかわかりません。。 お分かりの方、是非教えてください！！
- ベストアンサー
- その他（インターネット・Webサービス）
- テーブルを左右に並べて表示させたいのですが
テーブルを左右に分割して、左側にメニュー、右側に静的な文字を表示させています。 <table> <tr><td>メニュー</td> <td>静的な文字</td><tr></table> 左側のメニューをクリックすると子メニューが現れて行数が増えるメニューにしました。 --書籍のJavaScriptを応用したらうまく作れました。 ただ、右側の静的な文字が、（左側親メニューをクリックし子メニューが現れ、左側の行数が増えることによって）下がってしまいます。 <td></td>の間にもうひとつテーブルをいれても、同じです。 CSSか何かで定義できそうな気もしますが、よくわかりません。（CSS使ったことがありません。） ご存知の方おられましたら、よろしくお願いします。
- ベストアンサー
- HTML
- 表の折り返しについて
お世話になっています。 セルに表示する内容を折り返さずに表示したく、 下記のHTMLを作成したのですが自動折り返しとなってしまいます。 どなたかわかる方がいらっしゃったら、ご教授お願いいたします。 ・動作環境 OS：WIN XP ブラウザ：IE６ ・ソース <TABLE border="2" cellspacing="0" width=500 rules ="all"> <COLGROUP> <col width="100"> <col width="100"> <col width="100"> <col width="100"> <col width="100"> </COLGROUP> <TR> <TD nowrap>あああああああああああああああああ</TD> <TD nowrap>いいいいいいいいいいいいいいいいい</TD> <TD nowrap>うううううううううううううううううう</TD> <TD nowrap>えええええええええええええええええ</TD> <TD nowrap>おおおおおおおおおおおおおおおおお</TD> </TR> </TABLE>
- 締切済み
- HTML
- 文字を右寄りにしつつ、背景を赤にするには
css初心者です。 一番左のセルのみ、文字を右寄りにしつつ、背景を赤にしたいのですが、 全ての背景に色がついてしまいます。 １と１００のセルのみ、文字を右寄りにしつつ、背景を赤にするにはどうすればいいですか？ <html> <head> <title>test</title> <style type="text/css"> td.table_moji_right { text-align: right; } td { background-color: red; } </style> </head> <body> <table border=1 cellspacing=1> <tr><td class="table_moji_right">1</td><td>aaa</td></tr> <tr><td class="table_moji_right">100</td><td>iii</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
- CSSのid属性
cssでtableにid属性を指定しています。 同じページの中で同じid属性を何度も使用しても大丈夫なのでしょうか？ HTMLチェッカーで 「重複しています」とエラーがでたので心配になりました。 また、以下のように、同じ<table>内で、 <tr>と<td>にそれぞれclassを持たせても大丈夫でしょうか？ IEではキチンと表示されるのですが、 本来はやってはいけないことだったりしますか？ <table id="table-style"> <tr class="tr1"> <td class="td1"> ほにゃらら </td> </tr> </table> 教えてください！ 宜しくお願いします。
- 締切済み
- その他（プログラミング・開発）
お礼
ご教授ありがとうございました。 ”small”ってブラウザによりけりなんですか…初めて知りました。