tableの中にtableを作ると、width指定が機能しない
- tableの中にtableを作り、中側にあるテーブルの列ごとにwidthを指定する方法を探しています。
- 問題は、width=100のテーブルの中に100pxを超える文字列を入れると、widthの指定が無視されてテーブルが横長になってしまうことです。
- 解決策をご教示いただけないでしょうか？
- ベストアンサー
tableの中にtableを作ると、width指定が機能しない
tableの中にtableを作り、中側にあるテーブルの列ごとにwidthを指定したいのですが、うまくいきません。ソースを書いてみます。 例： <table width=300> <tr><td> <table width=100> <tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><tr> </table> </td><td> <table width=100> <tr><td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td><tr> </table> </td><td> <table width=100> <tr><td>ccccccccccccccccccccccccccccccccccc</td><tr> </table> </td></tr> </table> width=300のテーブルの中にwidth=100のテーブルが3つできたのはいいのですが、width=100のテーブルの中に100pxを超える文字列を入れると100pxという値を無視してテーブルが横長くなってしまいます。 これを100pxという値に従わせるにはどうしたらいいでしょうか？
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
連続する半角英数字が改行されていないだけではないですか？ 自動改行の仕様はブラウザ依存らしいですが、連続した半角英数字が 自動改行されないのはどのブラウザも同じです。 日本語文字列を入れたり途中でスペースを入れて試してみてください。
関連するQ&A
- TABLE内でのwidth指定
<table> <tr><th colspan="3">●</th></tr> <tr><td class="1">■</td> <td class="2">▲</td> <td class="3">★</td></tr> <tr><th colspan="3">○</th></tr> <tr><td class="1">□</td> <td class="2">△</td> <td class="3">☆</td></tr> </table> このサンプルについて考えています。 ●○が、割と長い文字列になります。 この時、例えば2段目の左の列が、■,□のうち長い方の文字列に合わせて「width」が表示されるためには、スタイル「class="1"」の内容をどう記述すれば良いのでしょうか。 デフォルトの「width:auto」では、●○の長さに引っ張られてしまい、余分なスペースが出来てしまいます。 2段目の中の列（▲△部分）が短文を記述するセルなので、●○に合わせる必要のあるスペースは、全てここで吸収してしまいたいのです。 同じ仕組みで幾つかテーブルを組みますので、【class="1"】のwidthにpx,%等といった値自体を指定するのは向いていません。 ご指導おねがいします。
- ベストアンサー
- HTML
- テーブルで中央に指定したい
1行1列の横100％ 縦100％に指定したテーブルを1つ そのテーブルの中に1行1列の横100px 縦100pxが1つ このようにした場合、中に入れたテーブルはどの解像度でも画面の中心にくるはずです。 しかし、IE6で確認すると横の中央にはくるのですが縦の中央にはきません。 しかしネスケ4.7ではイメージ通りになっています。 なぜでしょうか？ [ソース参考] <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table width="100" height="100" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0033CC"> <tr> <td width="100" height="100"><center> <font color="#FFFFFF"><strong>中央</strong></font> </center></td> </tr> </table> </td> </tr> </table>
- 締切済み
- HTML
- TABLEタグの幅指定
テーブルの幅を厳密に指定したいのですが、 例えば以下のような１行２列のテーブルがあるとき、 <TABLE CELLSPACING=1 CELLPADDING=4 BORDER=0> <TR> <TD WIDTH=100>***</TD> <TD WIDTH=100>***</TD> </TR> </TABLE> このような場合にテーブルタグにWIDTH属性を加えるとすると、 100*2+4*4+1*3=219で、WIDTH=219が正確な値なのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- widthの％ or ピクセルを指定した場合の違いについて
お世話になっております。 下記のソースは、２つのテーブルをくっつけたソースなのですが、 (1)はwidthに「％」を指定しており、(2)は「ピクセル」を指定しています。 (1)の％だとちょうど合っていますが、(2)のピクセルを指定した場合では、値を合わせているにも関わらずずれてしまっています。 「ピクセル」指定をした場合でも合わせるにはどうすればよいのでしょうか？ (1)widthに「％」を指定 </head> <body> <div style="width:330;height:20;overflow:hidden"> <table cellpadding="0" width="300" border="1" align="left"> <tr> <td width="20%">列1</td> <td width="20%">列2</td> <td width="20%">列3</td> <td width="20%">列4</td> <td width="20%">列5</td> </table> </div> <div style="width:330;height:50;overflow:auto"> <table cellpadding="0" width="300" border="1" align="left"> <tr> <td width="20%">ああああああああああああああああああああああ</td> <td width="20%">2</td> <td width="20%">3</td> <td width="20%">4</td> <td width="20%">5</td> </tr><tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr><tr> <td>7</td> <td>8</td> <td>いいいいいいいいいいいいいいいいいいいいいい</td> <td>10</td> <td>11</td> </tr> </table> </div> (2)widthに「ピクセル」を指定 </head> <body> <div style="width:330;height:20;overflow:hidden"> <table cellpadding="0" width="300" border="1" align="left"> <tr> <td width="60">列1</td> <td width="60">列2</td> <td width="60">列3</td> <td width="60">列4</td> <td width="60">列5</td> </table> </div> <div style="width:330;height:50;overflow:auto"> <table cellpadding="0" width="300" border="1" align="left"> <tr> <td width="60">ああああああああああああああああああああああ</td> <td width="60">2</td> <td width="60">3</td> <td width="60">4</td> <td width="60">5</td> </tr><tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr><tr> <td>7</td> <td>8</td> <td>いいいいいいいいいいいいいいいいいいいいいい</td> <td>10</td> <td>11</td> </tr> </table> </div>
- ベストアンサー
- HTML
- 文字サイズ変更でテーブル要素（幅の値を指定済み）の幅が変化しないようにするには？
宜しくお願いします。 [症状] TABLE・TDタグにて、幅をしているすると、 文字サイズ：小 で見るときは、設定した値の 適正地が反映されるが、文字サイズ：中 以上に 設定すると、TABLEで設定最多幅は有効なままで あるが、TDで設定した値は完全に無視される形で、 テーブルの中のバランスが乱れてしまう。 [ソース] <table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="white" style="border-collapse:collapse "> <tr> <td style="width:250px; ">あ</td> <td style="width:300px; ">い</td> <td style="width:200px;">う</td> </tr> <tr> <td>え</td> <td>お</td> <td>か</td> </tr> </table> [コメント] 特に変哲のないソースだと思います。 あ～か の文字のところには、それぞれもう少し長い 文章が入る形となります。 [質問] 文字サイズをブラウザ上で変更しても、 TDの幅が変わらないようにしたい。 その際に、文字のサイズを固定はしたくないです。 [その他] styleではなく、width指定しても 効果がありませんでした。 宜しくお願いします。
- ベストアンサー
- 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指定だけにしてみてもダメでした。 方法を教えてください。
- ベストアンサー
- レンタルサーバ・ASP
- 【IE6】テーブルにcolspanが入ると幅指定がずれる？
閲覧いただきありがとうございます。 <Html>にて、<table>を入れているのですが <colspan>すると幅指定がずれてしまいます。 タグ記述のミスなのか、仕様なのかはっきりと分からない為 質問させていただきます。 下記のようなテーブルを作っています。 【テーブル】 テーブル幅 500px 2行 5列：（各列100pxの5等分） 【列内容】 1行目 ├5列全て colspan 2行目 ├1列目：100px ├2-3列目：100+100＝200px (colspan=2) ├4-5列目：100+100＝200px (colspan=2) ここで、2-3列目に幅200pxに指定した <select>タグを入れると、意図しない幅になってしまいます。 意図している動きは 2-3列目の幅ぴったりに<select>が入ってほしいのですが 4-5列目の4列部分がえぐれてしまい、4-5列目が200pxではなく 100pxぐらいの描画になってしまいます。 そして<select>タグは2-3列目にぴったりと入らず、 後ろに100pxの空きがでてしまいます。 http://kikky.net/pc/css_bug020.html このサイトではIE6ではcolspanがあると幅指定がずれると なっていますが、同一の現象なのでしょうか？ 示唆いただければ幸いです。 宜しくお願いします。 --------------記述html--------------- <html> <head> <title> ColSpanテスト </title> </head> <body> <table width="500" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" style="border-collapse: collapse;" > <colgroup> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> </colgroup> <!-- １行目 --> <tr> <td colspan="5"> span5 </td> </tr> <!-- ２行目 --> <tr> <!-- １列目 --> <td> </td> <!-- ２-３列目 --> <td nowrap colspan="2" > <select style="width:200px;" size="1" name="sl" id="sl"> <option value="99999">２列にしたい</option> </select> </td> <!-- ４-５列目 --> <td colspan="2" > 200pxなのに・・・ </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- tableの中のtableの表示と外側（大きい方）のtableに背景画像を表示させる方法
非常にわかりにくいタイトルで申し訳ありません。tableの中にtableを入れて、外側（大きい方）のtableだけ背景画像を表示させたいのですがどのようにすればいいのでしょうか？下記ソースまでは作ったのですが、中（小さい方）のtableがなぜか右よりになってしまいます。小さいtableを真ん中にして、そのtableの周りを画像で囲みたいのですがどのようにすればいいのでしょうか？もちろん、下記ソースでなくても全然かまいません。htmlはまだまだ勉強中で詳しい方からすれば非常に見難いソースで申し訳ありませんが、ぜひお力添えいただけたらと思いますのでよろしくお願いします。 ↓ソース <html> <head> <body> <title>タイトル</title> <TABLE background="画像jpg"><TD width="10%" height="10%"><TR></TD><TD height="100%"></TD><TD width="100%" height="100%"><TD width="100%"><TD> <TABLE border width="600" height="100%" bgcolor="white"> <TR> <TD> 文章 </TD> </TR> </TABLE> </CENTER> </body> </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
- テーブルの中にテーブルを入れ込んで・・・
最近、質問ばかりしてるような気がするのですが・・・ m(__)m 親テーブルのセルの中に子テーブルを入れ込んで 子テーブルを親テーブルのセルの縦位置を中央に表示させたいのですがうまく行きません NN6.Xでは表示されるのですがIEだと上寄せに 表示されてしまいます。 これはIEの仕様でしょうがないのでしょうか？ （↑けしてダジャレではありません(^^ゞ） セル内配置でテキストや画像は上手く 中央位置に出来るのですが子テーブルが出来ないです なぜでしょうか？ 参考のためにソースコードを --------------------------------- <table width="100%" border="1" height="100%"> <tr> <td align="center" valign="middle"> <table width="50%" border="1" height="50%"> <tr> <td> </td> </tr> </table> </td> </tr> </table> ------------------------------------- よろしくお願いします。 スタイルシートやjavascriptを使ったやりかた とかもあるのでしょうか？
- ベストアンサー
- HTML
