• ベストアンサー

TDタグのwidth属性と文字の長さ

ko-netの回答

  • ベストアンサー
  • ko-net
  • ベストアンサー率28% (2/7)
回答No.1

フォントサイズにもよりますが、例えばIEの場合 文字のサイズ「中」で 半角英数 11文字位です。 また、<td width="100" style="font-size:12px;">というように文字サイズを12pxに固定にしてしまうと15文字位入ります。 半角英数はスペース無しで記述すると改行されずに延びてしまうので注意が必要です。

hide76318
質問者

お礼

参考にさせていただきます。 ありがとうございました。

関連するQ&A

  • Width指定の中に入り切らない文字をカットしたい

    下のような指定をすると、1行目のshowLv3の中が90pixcelでは入り切らない場合、改行されて2行に表示されてしまいます。 showLv3の中は文字列で、全角・半角が混在しています。 width=90をオーバーしないように文字列の後ろをカットするためにはどうすればいいでしょうか? よろしくご教授ください。 <tr class="tdListText"> <td width="90" ><%=showLv3%></td> <td width="100" ><%=showLv4%></td> <td width="110"><%=showkrk%></td> <td width="80"><%=StringUtil.formatNum(info.getDsnsry())%></td> <td width="35;<%=info.getTnikgo()%></td> <td align="right" width="80"><%=StringUtil.formatNum(info.getSmktnk())%></td> <td align="right" width="80"><%=StringUtil.formatNum(info.getTmmdkgsry())%></td> <td align="right" width="90"><%=StringUtil.formatNum(info.getTmmdkdmny())%></td> <td align="right" width="40" ><%=showrtuT%></td> <td align="right" width="80"><%=StringUtil.formatNum(info.getZmmdkgsry())%></td> <td align="right" width="90"><%=StringUtil.formatNum(info.getZmmdkdmny())%></td> <td align="right" width="40" ><%=showrtuZ%></td> <td align="right" width="80"><%=StringUtil.formatNum(info.getRuidkgsry())%></td> <td align="right" width="90"><%=StringUtil.formatNum(info.getRuidkdmny())%></td> <td align="right" width="40"><%=showrtuR%></td> </tr>

    • ベストアンサー
    • HTML
  • width指定したTDでwhite-space:nowrapが効かない

    width指定したTDでwhite-space:nowrapが効かない ブラウザはIE6~8のみを想定しています。 下記のHTMLでは、2行目は正常なのですが、1行目のnowrapが働かず、改行がかかってしまいます。 列毎に幅を指定する必要があるので、1行目にはwidthを指定しているのですが、 どのようにすれば自動改行を禁止できるでしょうか。 <table style="table-layout: fixed;"> <tr> <td style="width: 50px; overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="width: 70px; overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> <tr> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> </table>

    • ベストアンサー
    • HTML
  • widthを指定しない<td>が幅をシェアする基準?

    <table>タグの表示不安定につき、ご教示ください。 aaaa.txtに蓄積したデータをCGIで切り分けて、下記の<table>タグ内に割り付けて 表示させています。 <table width=510> <tr><th>左列の表題</th> <th>右列の表題</th></tr> <tr><td>改行タグを含む文字列A1</td> <td>改行タグを含む文字列B1</td></tr> <tr><td>同様のA2</td><td>同様のB2</td></tr> <tr><td>同様のA3</td><td>同様のB3</td></tr> <!--このtrを繰返し--> </table> 表幅を絶対指定したのは、印刷時に 510 px / 72 dpi * 2.54 cm = 18 cmで、 A4の幅に納まりやすいだろうという意図です。文字列AとBは、それぞれ <br>で区切ってありますが、区切りは概ね1行分(はみだせば折り返し)です。 <td>の幅を指定しなかったのは、<br>までの長さに応じて表示幅をシェアさせ、 折り返し頻度を減らすこと(印刷時の縦長の節約)が目的です。 IE5/Win&Mac及びNN4.7/Win&Macで、td内の1行長を無視した割付けが しばしば生じ、その割付け方の法則がわかりません。小細工を諦めて、列幅を 50%ずつに指定してしまおうかとも思っていますが、ブラウザは何を基準に 列幅を割り付けているのでしょう? 要領を得ない状況説明で恐縮ですが、追加説明は補足要求でご指示ください。

  • ●○■□などの文字を含んだ<td>の幅指定について

    Firefoxで表示確認をしています。 <table border="1" width="100"> <tr> <td>あああああああああああ</td> </tr> </table> だと、幅100pxの位置で自動的に改行されるのですが、 <table border="1" width="100"> <tr> <td>●●●●●●●●●●●</td> </tr> </table> だと改行ず、幅がオーバーしてしまいます。●以外にも○■□などでも同じでした。 ●を使いつつ、指定した幅で改行させることはできないでしょうか?

  • td width="180" と固定してるのですが・・

    <div style="width:500;height:220;overflow:auto; scrollbar-3dlight-color:#9acd32; scrollbar-arrow-color:#9acd32; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#9acd32; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#9acd32; scrollbar-track-color:#ffffff; "> <table style="font-size:13px; color:magenta;"><tr align="center"> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> </tr></table> </div> img には 110×150 のサイズの写真を入れています。 div width="500" にしているので、180×3=540 ですから3枚目のimgが途中で切れて、残りが横スクロールに引っ込むと思ってたのですが、実際にはimgがぎゅうぎゅうに詰まって4.8枚見えるようになります。 何故 td width を固定しているのに変動してしまうかがわかりません。 どうすれば img と img のあいだを余裕もたせて表示することができますでしょうか? よろしくご教授のほど願います。

    • ベストアンサー
    • HTML
  • widthを設定してもテキストを流すと幅が広がってしまう

    トップページの左ナビの部分です。 1行2列の大テーブルの、左のtdが左ナビになっています。 ↓こんな感じです。 <table width="800"> <tr><td>左ナビ</td></tr> <tr><td>内容</td></tr> </table> この左ナビ部分を更に<div>で区切って、 その<div>の中に改行なしのテキストを流し込むと大テーブルの幅800まで広がってしまいます。 幅170pxの指定方法は、<div class="navi">というふうにwidth指定を含むcssをつけています。 cssではダメなのかと、<div>なしで tdのwidth指定だけにしてみてもダメでした。 方法を教えてください。

  • 半角だけだとtableタグのwidth指定が無効になってしまう。

    半角だけだとtableタグのwidth指定が無効になってしまいます。半角を入力した際にwidth指定を有効にする方法をご教授お願いします。 <TABLE border="1" width="110"> <TBODY> <TR width="110"> <TD width="110">0123456789012345678901234567890123456789</TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="1" width="110"> <TBODY> <TR width="110"> <TD width="110">0123456789012345678901234567890123456789012345678901234567890</TD> </TR> </TBODY> </TABLE>

    • ベストアンサー
    • HTML
  • <table>の幅の設定のことでの疑問

    HTMLに関しては素人です。 HTMLで例えば下記のように表を記述する時 <table border='1' width='300'> <tr> <td>●●●●● </td> </tr> </table> ●●●●●のところに英数半角の文字を 「aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa…」 こんな感じでこの倍くらい続けて書いて、ブラウザで表示すると 設定した幅が無視されて横に果てしなく続いてしまいます。 「英数半角」ではなく「ひらがな」で同じように書くと きちんと設定した幅で折り返すように表示されます。どうしてなんでしょうか? 英数半角でもきちんと設定した幅で折り返すようにするにはどうすればよいのでしょうか?

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

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

    • ベストアンサー
    • HTML
  • テーブルのレイアウトがおかしくなる

    畏れ入ります。 テーブルを作っているのですが奇妙な現象にあっています。 <table border="1" width="100%"> <tr> <th width="18">&nbsp;</th> <th width="100">&nbsp;</th> <th>&nbsp;</th> <th width="100">&nbsp;</th> </tr> <tr> <td rowspan="2">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="3">&nbsp; <!-- ここに たくさんの 文字列を入れると ・・・ --> </td> </tr> </table> このコメントの部分が無い状態では正常にでていますが、 ここにたくさんの文字列(半角30文字程度でおかしくなります)を投入すると、レイアウトが異常に崩れてしまいます。 文字列は改行してもかまわないのですが テーブル1行目2行目のセルサイズ(width)がこのように変化してしまうと困るのです。 どのようにしたら良いか(width=100の部分を守らせたい) 教えてください。

    • ベストアンサー
    • HTML