• ベストアンサー

テーブルで列の幅を指定する

HTMLタグでWEBサイトを作成していますが、テーブルの幅を指定しても実際ページを開けると、同じ数値入れても同じ幅にならなかったり、全ての幅指定してもその通りになりません。またウィンドウを大きくしたり小さくしたりすると、特定の列のみ幅が狭くなったり広くなったりします。どうすれば幅を指定した数値どおりに固定できますでしょうか。

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

質問者が選んだベストアンサー

  • ベストアンサー
  • gura_
  • ベストアンサー率44% (749/1683)
回答No.2

 style="table-layout: fixed;" で、指定すると良いようです。↓ <html><head> </head> <body> <table border=1 style="table-layout: fixed;"> <tr height="50"> <td width="160" colspan="2">あああああああああああああああああああああああああ</td> <td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td> <td width="160">ううううううううううううううううううううううううう</td> </tr> <tr height="50"> <td width="80">かかかかかかかかかかかかかかかかかかかかかかかかか</td> <td width="80">ききききききききききききききききききききききききき</td> <td>くくくくくくくくくくくくくくくくくくくくくくくくくくくくくく</td> <td>けけけけけけけけけけ</td> </tr> </table> </body> </html>

fujikulimbi
質問者

お礼

ありがとうございました。上手くいきました。このタグは知りませんでした。勉強になりました。

その他の回答 (1)

noname#16352
noname#16352
回答No.1

・table の width ・横一列分の全 td の width 両者ともピクセル値で統一して指定して下さい。 指定抜けや%指定が混在するとその部分で伸張が発生します。 [ex] <table width="600"> <tr>  <td colspan="2">...</td>  <td width="150">...</td>  <td width="150">...</td> </tr> <tr>  <td width="150">...</td>  <td width="150">...</td>  <td>...</td>  <td>...</td> </tr> </table> など

fujikulimbi
質問者

お礼

ありがとうございました。今までは列のみピクセル値で指定していましたが、テーブル全体は指定していませんでした。これで解決しました。

関連するQ&A

  • tableを利用したときセル幅は指定できますか?

    お世話になります。 HTMLでtableを利用したときに2列あると、タグ幅が左と右の文字数で 影響を受けてその都度、変わってしまします。 これを左の幅をいくつ、右の幅をいくつと指定(固定)出来ますでしょうか。 宜しくお願い致します。

  • htmlメルマガで幅を固定するには?

    現在複数のサイトで更新されたら必要な部分のhtmlを取得して自分にメルマガとして送信するプログラムを作成しています。 htmlに関してまったくの無知ですので教えていただきたいことがあります。すべてのメールで横幅を固定したいのですが、どんなサイトのhtmlでも幅を固定してメルマガにするにはhtmlタグにどのような処理をすればよいのでしょうか? table,imgタグ以外にどのようなタグに幅情報を挿入すればよいのでしょうか? 更新されたサイトから得られたhtmlはサイトがそれぞれ違いますのでそれぞれのタグに対して幅を指定するのは、すべてに対応する正規表現はどうすればよいかはhtmlをもっと勉強しないとかけないので、できれば取得したhtmlテキストの最初と最後に幅を指定する何かのタグを挿入するだけにしたいのですが、それでは崩れてしまうのでしょうか? どのようなことを気にすれば、すべてのメルマガの幅が固定できるか教えてださい。よろしくお願いします

  • TABLEの幅がっ?!

    初めて質問します、WEBデザイナーをしている者です。 が、恥ずかしいことに、TABLEの幅がどうしても広がってしまってWindowサイズが幅800くらいになってしまいます・・・(涙) そのページのレイアウトは、まずヘッダー/メイン用/フッターを入れた3行1列の大きなテーブル(幅100%指定)があり、そのメイン用の中にメイン(幅90%指定)を入れ子にしている状態です。 メイン(幅90%指定)を消すと、ウィンドウ幅は自由に成り行きで動いてくれます。 でもメインを入れたとたんに800以上になってしまいます。 メイン(幅90%指定)を折り返し無しにしてないし、理由がわからないんです。 説明不足かとは思いますが、非常に困っています。 ヒントくらいでもいいのでアドバイスいただければと思いますm(._.)m

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

    どなたか教えてください。 現在、strictで、cssを用いてソースの手打ちで HPを作成しています。 文字サイズをユーザー側で変えられるように 文字をemで設定しました。 文字サイズを小→大に変更すると テーブルの中の文字が全部表示されません。 (更新ボタンを押すと正常に 全部の文字が表示されますが) この症状のときは、テーブルの横幅などをピクセル指定 していました。 テーブル幅がピクセル指定しているために 正常に表示されないのかと思い、テーブル幅などの 指定も全てem指定に変更しました。 今度は、全部の文字が表示されるのですが、 文字サイズをユーザー側で小さくすると テーブルの横幅が極端に狭くなってしまい、 最大にすると、横幅が広くなりすぎてしまいます。 理想では、横幅を固定し、文字を全て 表示させることです。 テーブルの横幅を30emに指定し、中のtdタグは 計30emになるように指定しています。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 【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> <!-- 1行目 --> <tr> <td colspan="5"> span5 </td> </tr> <!-- 2行目 --> <tr> <!-- 1列目 --> <td> </td> <!-- 2-3列目 --> <td nowrap colspan="2" > <select style="width:200px;" size="1" name="sl" id="sl"> <option value="99999">2列にしたい</option> </select> </td> <!-- 4-5列目 --> <td colspan="2" > 200pxなのに・・・ </td> </tr> </table> </body> </html>

  • テーブル幅が固定できない

    cssに「table-layout: fixed;」を記載してテーブルの幅が固定になるように設定しています。 設定していますが、ブラウザの幅を狭めると テスト1|テスト2|テスト3 と表示されていたものが テスト1 テスト2 テスト3 と、レイアウトが崩れてしまいます。 <table>、<tr>、<td>タグにつけてみましたが、全て崩れてしまいます。 幅や高さ等も指定していますが、何かが足りないのでしょうか。

    • ベストアンサー
    • CSS
  • Dreamweaver テーブル(表)のセル幅を固定したい

    タグ打ちではなく、CSSパネルやマウス操作で教えてください。 行3列3でテーブルを作り、各セルの中にテキスト入力しているのですが、 「すべての幅を固定」としても、それぞれのセル幅が固定できていなく、 バラバラの幅となって反映されてしまいます。 均等幅にできないものでしょうか。

  • テーブルの幅を固定するとnowrapがきかなくなるのですが・・・

    いつもお世話になっております。どなたか教えて下さい。 テーブルの幅を”width=***”で固定しました(tableタグもtdタグも両方)。文字列を改行したくないので”nowrap”を書いて改行不可にしたら、改行は回避できたものの、幅が固定されずに文字の長さに合わせられてしまいました。 そこでこのサイト内で方法を模索していると”style=table-layout:fixed”で固定できると書いていたので追加すると幅の固定は出来たのですが、今度は文字列が改行されてしまいました。 どうすれば幅を固定し、改行も回避できるのでしょうか? 文字列が長すぎるものは途切れていてもOKなので、枠をとにかく固定したいのです。 どなたか回答御願い致します。 ブラウザはIE5か6です。

  • 4カラムのテーブルに絶対幅と相対幅の混在指定の可否

    以下のHTMLで、1列目は20ピクセル(?)、2列目は100ピクセルに幅が固定されているとして、 3~4列目、黄色と青のカラムの幅を均等に揃える方法はありませんか。 3~4列目の幅を<col=50%>ととると、1~2列目の幅が侵食されて崩れます。 ごらんのとおり、テーブル自体の幅は100%なので、モニタやブラウザの表示幅によってテーブル自体の幅も異なってくるため、 4カラムのテーブルのうち、1~2列目は絶対幅、3~4列目と相対幅と混在指定できればよいのですけど。 <html> <body> <table border=1 cellpadding=3 cellspacing=0 width=100%> <col width=20> <col width=100> <col> <col> <tr> <th rowspan=2 style="writing-mode: tb-rl;">基本情報</th> <th>プロジェクト</th> <td colspan=2>あいうえおあいうえおあいうえおあいうえお </tr> <tr> <th>概要</th> <td colspan=2>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <th colspan=2>コメント</th> <th bgcolor=yellow>当方から</th> <th bgcolor=blue>先方から</th> </tr> <tr> <th colspan=2>第1回会合</th> <td>◆ いいいいいいいいいいい<br>◆ うううううう</td> <td>◆ ええええええええええええええ<br>◆ おおおおおおおおおおおおおおおおおおおおおおおおおおおおお</td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • テーブル幅が固定できない

    テーブル幅が固定できないく困っています。 ドリームウィーバー上では意図した指定幅で表示されているのですが、ブラウザで確認してみると、両端の方のセルが極端に圧縮(幅が短くなる)され、それ以外のセルも圧縮されてしまいます。 画面を横スクロールしなければならないほどに横長のテーブルを作成するとこの現象が起きます。 colspanを使っているからいけないのでしょうか? それともほかに原因があるのでしょうか? このようなときの解決方法を教えてください。

専門家に質問してみよう