• 締切済み

htmlのセル幅固定の仕方

お世話になります。 htmlの表のセル幅は、どのように決まるのでしょうか。 THのwidth="○"を使っても、表示させるデータによって 幅が変化しているような気がします。 これは、私の記述の仕方が悪いのか、もしくは、width="○"では固定できないのか教えてください。 ●例 <TABLE border="1" width="150" > <TH width="50">a</TH> <TH width="100">b</TH> <td>○○○</td> <td>XXXXX</td> </TABLE>

  • HTML
  • 回答数2
  • ありがとう数0

みんなの回答

  • pingpong
  • ベストアンサー率0% (0/1)
回答No.2

<TABLE border="1" width="150">   <COL width="50">   <COL width="100">   <TR>     <TD>50ピクセル</TD>     <TD>100ピクセル</TD>   </TR> <TABLE> って感じでどうでしょう?

  • MtHill
  • ベストアンサー率68% (17/25)
回答No.1

表示するデータがスペースを含まない半角英数字や記号だったり、 セル幅より大きな画像などを入れると、セルの幅は大きくなります。 Internet Explorer なら、半角文字を強制改行させることができます。 詳細は過去ログ http://www.okweb.ne.jp/kotaeru.php3?q=212651 をご覧ください。 > ●例 は <tr> が抜けていますし、サイズの指定が矛盾しています。 table の基本を参考 URL などで調べてみることをおすすめします。 http://www.kanzaki.com/docs/html/htminfo16.html

参考URL:
http://www.kanzaki.com/docs/html/htminfo16.html

関連するQ&A

  • テーブルの幅

    tableのwidth指定についての質問です。 同じレイアウトで複数のhtmlファイルを作るのですが、その中のテーブル及びセルの幅をwidthで固定してあるのにも関わらず、セル内のテキストの長さによって各ファイルごとのテーブルのセルの幅が、IEでの表示で変わってしまいます。 <table width="450" cellspacing="0" cellpadding="2" border="1"> <tr> <th bgcolor="#ffcccc" width="150">aaaaaaaaa</th> <th bgcolor="#ffcccc" width="286">\100,000</th> </tr> <tr> <td colspan="2">ここには商品説明が入ります。ああああああああああああああああああああああああああああああああああああ</td> </tr> </table> 上記のaaaaaaaaaの部分がファイルによって長さが違うのですが、それによってセルの幅が変わってしまいます。 IE6でプレビューすると変わりますが、firefoxでは変わりません。 <th>を<td>に変更すると、幅は固定され変わりません。 IEの場合、thでwidth指定が出来ないのでしょうか。 なぜ変わってしまうのでしょうか?どこかに記述の問題があれば教えていただければありがたく思います。

  • 外部スタイルシートを使ってテーブルの幅を固定する方法について(アルファベットの解除?)

    テーブルで幅を固定した場合に、アルファベットの文字を続けて入れると、 それが改行されず、横に終わるまで続き、結果、固定した幅を無視した 状態で表示されてしまいます。 たとえば「aaaaaaaaaaaaaaaa」とう文字を入れた場合でも、 幅が固定されていれば自動的に aaa aaa aaa aaa aaa と改行される方法はないでしょうか? どんな状況でも幅を固定にしたいと思っています。 <table id="tukuttemitayo"> <tr> <th>aa</th> <th>bb</th> <th>dd</th> <th>ee</th> <th>ee</th> <th>gg</th> <th>we</th> <th>sdfsd</th> <th>3ew</th> <th>asf</th> <th>saf</th> </tr> <tr> <td>36</td> <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> <td>有り</td> <td>無し</td> <td>neko</td> <td>ham</td> <td>表示中</td> <td>ささ</td> <td>ささ</td> <td>ささ</td> <td>ささ</td> </tr> <tr> <td>87</td> <td>こんちわ</td> <td>有り</td> <td>無し</td> <td>2008-03-13 14:33:22</td> <td>sd</td> <td>sfd</td> <td>sfd</td> <td>sdf</td> <td>sdf</td> <td>df</td> </tr> </table> #tukuttemitayo{ border-collapse:collapse; width:330px; background:red; border:none; } #tukuttemitayo th { width:30px; border:solid 3px #00FF66; background:yellow; } #tukuttemitayo td { background:pink; width:30px; } あと、すごく初歩的な事かもしれませんが、 tableに設定するwidthの幅はthやtdのborderの幅も含めて計算しなくてはならないのでしょうか? <table> <tr> <th></th><td></td> </tr> <tr> <th></th><td></td> </tr> </table> table { width:104px } ←borderがあるので100ではなく104にする? tr {width:50px border:1px } td {width:50px border:1px} どんな条件でもテーブルで固定される幅を作りたいです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルの設幅固定がオフラインで崩れます

    WEBサイトでテーブルのセル幅を固定しているのですが、オンライン環境では意図通りになるものの、オフライン環境では固定されずに崩れてしまいます。 固定方法は、外部CSSで「table-layout:fixed;」と「各セルのwidth指定(class)」を記述しています(下記ご参照下さい)。 外部CSSへのリンク指定は絶対パスではなく相対パスで指定しており、オフライン環境でもCSSの参照は出来ていると思います(セル幅以外の記述内容は反映されます)。 どこに原因があるのか分からずに困っています。 お分かりになる方がおられましたら、ご教示頂きたくお願い申し上げます。 【CSS】 table.t { border:1px solid #000000; border-collapse:collapse; table-layout:fixed; font-size:13px; } table.t td{ border:1px solid #000000; height:13px; } table.t th{ border:1px solid #000000; font-size:13px; } .index{ width:155px; } .remarks{ width:100px; } .code{ width:120px; } ・ ・ ・ 【HTML】 <table class="t"> <thead> <tr> <th class="index">INDEX No.</th> <th class="remarks">Remarks</th> <th class="code">Part code</th> ・ ・ ・

    • ベストアンサー
    • CSS
  • テーブル<TD>の幅の固定

    テーブルのTD幅をWIDTHで指定しているのですが、入力するテキストによって幅が動いてしまいます。 例) <table width="50">  <tr>   <td width="10">AAAAAAAAAAAAAAAA</td>   <td width="40">AA</td>  </tr> </table> というような場合、幅の狭い方のセル幅が広くなってしまいます。 また逆に広い方が何度も改行させられて出力されたり、出力させたいテキストによって、いかようにも幅が変更されてしまいます。 他のサイトなども色々調べてみて、半角英数字の場合は特に顕著ということも書かれてあったのですが、半角英数字の出力は必須なんです。 (全角文字の場合でも、完全に固定とはなりませんでした) やっぱり完全にテーブルのセル幅を固定するのはムリなのでしょうか? 何か解決方法はありますでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • tdタグに何も入れなくとも幅を均一にする方法

    <table border = "1"> <tr> <th>hoge</th> <td></td> </tr> </table> 上記のような場合、<td>タグ内には何も書かれてないので セルがつぶされた形で表示されますよね? これを<th>タグ内のhogeと同じセルの幅で表示するにはどうすればいいですか? style属性にwidth:100pxとかしてみたのですが無駄でした‥

    • ベストアンサー
    • HTML
  • 固定幅div内のテーブルセルの幅指定方法

    幅を指定して横スクロールバーを有効にしたdivがあります。 その中に、divよりも幅の広いtableを置き、thやtdの幅を指定したいのですが、有効になりません。 tableへの幅指定は有効になるのですが、内容が動的に変化するので、セル単位で幅を指定したいと思っています。 解決方法がありましたらお願いいたします。 HTML:標準モード UA:Windows xp IE6 サンプルコード: <style> div{ height:200px; width:200px; overflow-x:scroll; border:#f99 solid 1px; } table{ background:#ddd; border:#666 solid 1px; } td{ width:100px; border:#666 solid 1px; } </style> <div> <table> <tr> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> </tr> </table> </div>

    • ベストアンサー
    • HTML
  • テーブルの幅固定について

    テーブルの幅固定を以下のように行っているのですが文字が指定した幅を超えると、 幅を指定してるにも関わらず、文字が改行せずに幅が伸びてしまいます。 自動的に改行になるとばかり思っていました。 <br>での改行は考えていないので、テーブルの幅を絶対的に固定する方法ありますでしょうか? <table width="50" border="0" style="background-color: #cecece"> <tbody> <tr> <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> </tr> </tbody> </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>

  • 同じwidth=200でもセル内の文字によって幅が違う

    まず、大体↓な感じの表を作りました(ファイル1)。 <table width="580"> <th width="60">【A列】</th><th width="320">【B列】</th><th width="200">【C列】</th> <tr><td>D</td><td>E</td><td>F</td></tr> <tr><td>G</td><td>H</td><td>I</td></tr>      ・      ・      ・ </table> このHTMLファイルをコピーしてファイル2を作り、 セル内の文字や数値のみ修正し、 随時ブラウザを更新して確認していると、 【C列】の列幅(200)が広くなったり狭くなったりする現象が起き (その分【B列】も変化し、全体的には580のままです)、 結果的に2つのファイルは【C列】の列幅が違います。 都合上、どちらのファイルも【C列】の列幅は同じにしたいのですが、 何か良い方法はありますでしょうか。 ちなみに、セル内の文字は【B列】も【C列】もオーバー分が折り返されています。 【A列】のみオーバーしないようにしています。 ご回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • 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>