- ベストアンサー
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,%等といった値自体を指定するのは向いていません。 ご指導おねがいします。
- みんなの回答 （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; } ではどうでしょうか？
お礼
申し訳ありません、説明不足でしたので、お礼の場を借りて補足いたします。 一部のTABLEでは"nowrap"で上手くいくのですが、TABLEによっては ●≧■+▲+★ になっている物があるのです。 この場合、■部分には、●の長さに合わせるため、文字列よりも広いwidthが取られてしまいますよね。 これを避けたいワケです。 ■+▲+★で足りないwidthは、全て▲（class="2"）の部分に集約してしまいたいということです。