- ベストアンサー
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,%等といった値自体を指定するのは向いていません。 ご指導おねがいします。
- delta-re
- お礼率33% (4/12)
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
多くのブラウザに対応させるには、縦列の幅指定するしかないのかもしれません。 サンプルソースのスクリーンショット http://www.dotup.org/uploda/www.dotup.org6435.png -----[サンプルソース]----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="NOINDEX, NOFOLLOW"> <style type="text/css"> body { background-color: #ffffff; color: #000000; } table.test{ background-color: #000000; border: 1px solid #000000; empty-cells: show; border-spacing: 1px; } table.test td { background-color: #ffffff; color: #000000; padding: 3px; } table.test col.l1 { width: 3em; } table.test col.l2 { width: 22em; } table.test col.l3 { width: 5em; } </style> <title><table>要素テスト</title> </head> <body> <h1><table>要素テスト</h1> <table summary="サンプルテーブル" class="test"> <colgroup> <col class="l1"> <col class="l2"> <col class="l3"> </colgroup> <tr> <td colspan="3">●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●</td> </tr> <tr> <td>■■■</td> <td>▲▲▲▲</td> <td>★★★★★</td> </tr> <tr> <td colspan="3">○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</td> </tr> <tr> <td>□□□</td> <td>△△△△</td> <td>☆☆☆☆☆</td> </tr> </table> </body> </html>
その他の回答 (3)
- seaw
- ベストアンサー率43% (10/23)
すみません、ソースの4行目にミスがありました。 ちなみに、スクリーンショットは、Mozilla Filefox 1.5.0.6(Windows)、Internet Explorer 6.0.2(Windows)、Opera 9.01(Windows)、Konqueror 3.4.2(Linux)のものを撮っています。 -----[ソース]----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="NOINDEX, NOFOLLOW"> <style type="text/css"> body { background-color: #ffffff; color: #000000; } table.test{ background-color: #000000; border: 1px solid #000000; empty-cells: show; border-spacing: 1px; } table.test td { background-color: #ffffff; color: #000000; padding: 3px; } table.test col.l1 { width: 3em; } table.test col.l2 { width: 22em; } table.test col.l3 { width: 5em; } </style> <title><table>要素テスト</title> </head> <body> <h1><table>要素テスト</h1> <table summary="サンプルテーブル" class="test"> <colgroup> <col class="l1"> <col class="l2"> <col class="l3"> </colgroup> <tr> <td colspan="3">●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●</td> </tr> <tr> <td>■■■</td> <td>▲▲▲▲</td> <td>★★★★★</td> </tr> <tr> <td colspan="3">○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</td> </tr> <tr> <td>□□□</td> <td>△△△△</td> <td>☆☆☆☆☆</td> </tr> </table> </body> </html>
- doublebeefcake
- ベストアンサー率42% (3/7)
ご質問の意味がちょっとわからないので的外れな意見だったらご容赦ください。 .1 { width : 1% ; }
- suzuko
- ベストアンサー率38% (1112/2922)
<table> <tr><th colspan="3">●</th></tr> <tr><td class="1" nowrap="nowrap">■</td> <td class="2">▲</td> か .1 { white-space: nowrap; } ではどうでしょうか？
関連するQ&A
- テーブルのレイアウトがおかしくなる
畏れ入ります。 テーブルを作っているのですが奇妙な現象にあっています。 <table border="1" width="100%"> <tr> <th width="18"> </th> <th width="100"> </th> <th> </th> <th width="100"> </th> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="3"> <!-- ここに たくさんの 文字列を入れると ・・・ --> </td> </tr> </table> このコメントの部分が無い状態では正常にでていますが、 ここにたくさんの文字列（半角30文字程度でおかしくなります）を投入すると、レイアウトが異常に崩れてしまいます。 文字列は改行してもかまわないのですが テーブル1行目2行目のセルサイズ（width）がこのように変化してしまうと困るのです。 どのようにしたら良いか（width=100の部分を守らせたい） 教えてください。
- ベストアンサー
- 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
- テーブル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
- TABLEのマスの増やし方
HTMLのテーブル？について教えて下さい。 ******************************************************************************************************************************* <TABLE class=table_a style="WIDTH: 100%"> <TBODY> <TR> <TD class=table_a_th2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR> <TR> <TD class=table_a_th2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR> <TR> <TD class=table_a_th2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR></TBODY></TABLE> ******************************************************************************************************************************* という記載で、縦3列横3列の表が出来るのですが 表の内容（枠組み）を変更する方法が分かりません。 *********************************************************** <TABLE class=table_a style="WIDTH: 100%"> <TBODY> <TR> <TD class=table_a_th2 rowSpan=2>左列</TD> <TD class=table_a_td>中列</TD> <TD class=table_a_td> <P>右列<BR class=first-child>右列</P> <P>右列</P></TD></TR> <TR> <TD class=table_a_td>中列</TD> <TD class=table_a_td>右列</TD></TR> <TR> ************************************************************* 作成したいのはこのようなイメージのもので 中列と右列を増やして行きたいのです。 どなたか詳しいかたご教授下さい。
- ベストアンサー
- HTML
- 4カラムのテーブルに絶対幅と相対幅の混在指定の可否
以下のHTMLで、１列目は20ピクセル（？）、２列目は100ピクセルに幅が固定されているとして、 ３～４列目、黄色と青のカラムの幅を均等に揃える方法はありませんか。 ３～４列目の幅を<col=50%>ととると、１～２列目の幅が侵食されて崩れます。 ごらんのとおり、テーブル自体の幅は100%なので、モニタやブラウザの表示幅によってテーブル自体の幅も異なってくるため、 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
- ＨＴＭＬ 複雑なテーブルの作成
今、ＨＴＭＬでテーブルを作成しています。 よろしくお願いします。 下記のHTMLでテーブルを作成し 番号「１８」までは、うまくいきました。 つぎに「１９」を作成しようとすると 「９」のセル（rowspan="5"）が下に伸びて、「１９」に重なります。 何か、解決の方法はありますでしょうか？ ＣＳＳでborderやclassを使用していますが省略しています。 また、widthも使用していますが省略しています。 <table cellspacing="7"> <tr> <th colspan="2">１</th> <th>２</th> <th>３</th> <th>４</th> <th>５</th> <th>６</th> </tr> <tr> <td>７</td> <td>８</td> <td rowpan="5">９</td> <td>１０</td> <td>１１</td> <td>１２</td> <td>１３</td> </tr> <tr> <td colspan="2">１４</td> <td>１５</td> <td>１６</td> <td>１７</td> <td>１８</td> </tr> <tr> <td colspan="7">１９</td> </tr> </table>
- ベストアンサー
- CSS
- テーブルの料金表の複雑な記述方法
練習でメニュー表作成をしているのですが、ややこしくてわかりません。。 やりたいことは、サービス内容と料金、ストレート、パーマ、トリートメントの色を同じに変更したいです。 ストレート、パーマ、トリートメントのところは右サイドの大人のところも料金も含めて色を変更したいです。 値段のところにclassを設定したから、縦には全部色を変えれるのですが、横にとなるとわかりません。 どのように記述すればよいでしょうか？ <table width="558" style="position: relative; top: -506px; left: 240px;"> <thead> <tr> <th rowspan="2" colspan="2"> サービス内容 </th> <th width="99" height="29" colspan="3"> 料金 </th> </tr> </thead> <tbody> <tr> </tr> <tr> <th width="165" rowspan="3"> カット </th> <td class="white" width="270"> 大人（一般） </td> <td class="price"> \4,200 </td> </tr> <tr> <td class="white"> 中学・高校生 </td> <td class="price"> \3,000 </td> </tr> <tr> <td class="white"> 小学生以下 </td> <td class="price"> \2,500 </td> </tr> <tr> <th> ストレート </th> <td class="white"> 縮毛矯正（カット・ブロー込） </td> <td class="price"> \8,600 </td> </tr> <tr> <th> パーマ </th> <td class="white"> カット・ブロー込 </td> <td class="price"> \5,200 </td> </tr> <tr> <th> カラー </th> <td class="white"> ファッションカラー </td> <td class="price"> \4,500 </td> </tr> <tr> <th rowspan="2"> トリートメント </th> <td class="white"> スペシャルプラチナ </td> <td class="price"> \2,300 </td> </tr> <tr> <td class="white"> スペシャルイオン </td> <td class="price"> \4,100 </td> </tr> </tbody> </table>
- ベストアンサー
- ホームページ作成ソフト
- こういう構造のtableはできるでしょうか
HTML で、テーブルをこういう構造にすることは可能でしょうか。 ┏━━━━┳━━━━━━┳━━━━┳━━━┓ ┃見出し１┃○○○○○○┃見出し２┃○○○┃ ┣━━━━╋━━┳━━━┻━━━━╋━━━┫ ┃見出し３┃○○┃少し長い見出し４┃○○○┃ ┗━━━━┻━━┻━━━━━━━━┻━━━┛ ↓こんな感じでできないかなと思ったのですが、できませんでした。(win7/IE10) <table border="1"> <tr> <th>見出し１</th><td colspan="2">○○○○○○</td> <th>見出し２</th><td>○○○</td> </tr> <tr> <th>見出し３</th><td>○○</td> <th colspan="2">少し長い見出し４</th><td>○○○</td> </tr> </table> ※インデントは全角スペースになっています ---------- １） 対象ブラウザは IE8～IE10 できればchrome等でも対応できたほうが良いのですが、最低限IEで表示できれば良いです。 ２) カラムの width 等を指定することなく左端や右端を揃えたいです。 ２の条件がなければ float とかも考えたのですが… どなたか良い方法をご存知の方がいらっしゃいましたら教えて下さい。 よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- 【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
- HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。
HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。 下のソースで５０と１３０のとこをきちんとエクセルのように枠線揃えたいのですが、 どのようにしたら良いのでしょうか？ よろしくお願いします。 <HTML> <BODY> <TABLE border=1><TR> <TH width="50"></TH> <TH width="135"></TH> <TH width="65"></th> <TH width="65"></th> <TH width="65"></th> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50 rowSpan=2>50</TD> <TD width=135 rowSpan=2>135</TD> <TD width=65 rowSpan=2>65</TD> <TD width=130 colSpan=2>130</TD> </TR><TR> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=50>50</TD> <TD width=135>135</TD> <TD width=65>65</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=250 colSpan=3>250</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=250>250</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
お礼
申し訳ありません、説明不足でしたので、お礼の場を借りて補足いたします。 一部のTABLEでは"nowrap"で上手くいくのですが、TABLEによっては ●≧■+▲+★ になっている物があるのです。 この場合、■部分には、●の長さに合わせるため、文字列よりも広いwidthが取られてしまいますよね。 これを避けたいワケです。 ■+▲+★で足りないwidthは、全て▲（class="2"）の部分に集約してしまいたいということです。