4カラムテーブルの絶対幅と相対幅の混在指定の方法は?

このQ&Aのポイント
  • 4カラムのテーブルに絶対幅と相対幅の混在指定の方法について教えてください。
  • テーブルの幅が異なる場合にも、1~2列目は絶対幅、3~4列目は相対幅で指定する方法を教えてください。
  • テーブル自体の幅によって、1~2列目の幅を侵食せずに、3~4列目を均等に揃える方法が知りたいです。
回答を見る
  • ベストアンサー

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
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • DrFell
  • ベストアンサー率55% (305/551)
回答No.1

相対幅と混在指定というより、プロジェクトを分割したくないという意味ですよね? 3~4列目の幅を<col=50%>とし、<th nowrap=nowrap>プロジェクト</th>としてください。 nowrapは分割禁止の意味です。

litton101
質問者

お礼

DrFellさん、早速レスありがとうございました。 ばっりち解決しました。めからうろこです。助かりました。

関連する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指定が出来ないのでしょうか。 なぜ変わってしまうのでしょうか?どこかに記述の問題があれば教えていただければありがたく思います。

  • 【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>

  • テーブルの幅の指定・・・

    テーブルの幅が変わらないように 幅を指定するようにするにはどうしたらよいでしょうか? 普通にwidth=100などと打ち込んでいるのですが、 サイズが変化してしまいます。 もうちょっと具体的に言うと、 <table> <tr> <td></td> <td></td> </tr> <tr> <td colspan=2></td> </tr> </table> 上に二つテーブルがあって、 その下に一つのテーブルがある状態です。 この状態で、上の二つのテーブルの右側の方には画像を入れて、 幅と高さを指定したいと思っています。 その下には、文を打ち込む予定です。 この画像のところを変化しないように指定したいのです。 画像が何重にも写らないようにしたいからです。 文をたくさん打ち込むとそれだけテーブルが大きくなりますよね。 そのときに上の二つのテーブルのところの 画像が入っていない左のほうのテーブルの長さを変化させたいのです。 どうすればいいでしょうか? よろしくおねがいします。

    • ベストアンサー
    • HTML
  • テーブルサイズ指定

    こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という2つのテーブルで、 2つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 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
  • TABLEタグの幅指定

    テーブルの幅を厳密に指定したいのですが、 例えば以下のような1行2列のテーブルがあるとき、 <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が正確な値なのでしょうか? よろしくお願いします。

  • テーブルwidthで指定したのに幅が広がる

    ↓のようなHTMLをCGIで出力しました。 <TABLE width="500" cellpadding="10" bgcolor="wheat"> <TR> <TD>2006年9月6日(水)20時48分 </TD><TD><B>2/12求人広告結果</B></TD><TD> 広告</TD> </TR><TR><TD colspan="3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </TD></TR> <TR><TD colspan="3"><A HREF="./outsider01.cgi?mycmd=edit&view_page=328"><P align="right">編集</A>|<A HREF="./outsider01.cgi?mycmd=delete&view_page=328">削除</A></P></TD></TR> </TABLE> すると、テーブルの幅が広がるのです。 aaaaaaaaaaaaaaaaaaaa・・・ ではなく、ふつうの全角の文章ですとwidth500で固定されるようです。 なぜ小文字のaaaaaaaaaaaaaだとwidthが固定されないのでしょうか?

    • ベストアンサー
    • HTML
  • htmlの記述について

    html初心者です。 下記のような表を作りました。 <center><table border="1" bgcolor="#f0f8ff" cellpadding="5"><tr><th colspan="2">見出し</th></tr><tr><td nowrap>入力1_1</tr></table><br></center> <center><table border="1" bgcolor="#f0f8ff" cellpadding="5"><tr><th colspan="2">見出し</th></tr><tr><td nowrap>入力1_1</td><td width="400">入力1_2</td></tr><tr><td nowrap>入力2_1</td><td width="400">入力2_2<br></td></tr><tr><td nowrap>入力3_1</td><td width="400">入力3_2<br></td></tr><tr><td nowrap>入力4_1</td><td width="400">入力4_2<br></td></tr><tr><td nowrap>入力5_1</td><td width="400">入力5_2<br></td></tr><tr><td nowrap>入力6_1</td><td width="400">入力6_2</td></tr></table><br></center> 2つ枠を作り表示する文字数に関係なく上の枠を常時下の枠と同じ幅にしたいのですが、文字数に依存した幅になってしまいます。常時同じ幅にするにはどこを直せばいいのでしょうか? 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • table の幅を固定したい

    初心者です。教えて頂けますか? テーブル内に、php pear mdb2 を利用して文字列を入れているのですが、 文字列が長いのですが、シングルバイト文字とマルチバイト文字で挙動が異なっています。 指定している幅で固定したいのですが どうすれば良いでしょうか? 申し訳ありません。よろしくおねがいします。 <table width="380" border="1" cellspacing="0" cellpadding="0"> <tr> <td> あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。... </td> </tr> </table> <table width="380" border="1" cellspacing="0" cellpadding="0"> <tr> <td> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy... </td> </tr> </table>

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

専門家に質問してみよう