<html>

<body>
<table width="100%" border="1">
<tr>
<td colspan="2">
<table width="100%" border="1">
<tr>
<td align="left" width="100px">a</td>
<td align="center">b</td>
<td align="right" width="100px">c</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="150px" align="left">ここは固定</td>
<td align="left">ここは可変</td>
</tr>
</table>
</body>
</html>

1行目の2カラム目のように2行目の2カラム目を可変にし、
2行目の1カラム目のレイアウトを150px固定にする方法を教えてください。
どうしても2行目の1カラム目が固定できません。

段組にdivでなくtableを使うのは邪道というのはおいておいてください。
これは無理!という回答でも理由がわかればOKです。

また、ブラウザはIE6限定でOKです。

回答の条件
  • 1人3回まで
  • 登録:2007/09/16 13:51:15
  • 終了:2007/09/17 03:47:06

ベストアンサー

id:tailshade No.4

tailshade回答回数14ベストアンサー獲得回数32007/09/16 21:41:06

ポイント50pt
<html>
<body>
<table width="100%" border="1">
<tr>
<td colspan="2">
<table width="100%" border="1">
<tr>
<td align="left" width="100px">a</td>
<td align="center">b</td>
<td align="right" width="100px">c</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="150px; width: 1%;" align="left"><div style="width: 150px;">test</div></td>
<td align="left">test</td>
</tr>
</table>
</body>
</html>

このように「2行目の1カラム目」の横幅を非常に小さい割合にし、カラム内に150pxのブロック要素を置けば一応は固定幅になることを確認しました。

一応と書いた理由はウィンドウのサイズを変更すると1-2px程度カラムの大きさが変化してしまうためです。


Web上で色々と検索してみましたが、やはりIEのバグの線が濃厚でした。

id:mwys

バグなのですね。いくらやってもできないわけです。というかDIVタグでやれってことですかね(^^;

2007/09/17 03:41:53

その他の回答(4件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812007/09/16 14:43:21

ポイント10pt

試してみましたが、よほどブラウザの横幅を狭くしない限り固定しているように思えますが……

id:mwys

すみません。サンプルにあげたものだと確かに大丈夫のようです。わかりやすいように2バイトにしたら大丈夫になってしまいました。

2行目の2バイトの各カラムを「test」という文字に変えてみてもらえないでしょうか。1カラム目が広がって150pxが維持できません。

2007/09/16 19:48:32
id:longring No.2

longring回答回数5ベストアンサー獲得回数02007/09/16 18:21:20

ポイント5pt

2行目も、1行目と同じように、

TABLEを作ったらどうですか?

id:tailshade No.3

tailshade回答回数14ベストアンサー獲得回数32007/09/16 19:18:47

ポイント10pt

とりあえずHTMLソースをそのまま貼り付けて表示してみましたが「2行目の1カラム目」は固定されて表示されていました。また「2行目の2カラム目」は可変になっていたので、所望の表示になっていると判断しました。


ただし、「1行目の1カラム目」に長い英単語などを入れてカラムの横幅が100pxより大きくなると「2行目の1カラム目」の幅がおかしなことになりました。

この問題は「1行目の1カラム目」にスタイルシートでword-break: break-all;を指定してやるか、「2行目の1カラム目」のwidthを大きくしてやることで解決できました。


また、例示されているソースの「2行目の1カラム目」のwidthを150px未満にすると同じくおかしなことになりました。


色々いじりまわした結果としては「2行目の1カラム目」がおかしなことになるのは、テキストの幅とカラムを区切るボーダーの表示が噛み合っていない事が原因のようでした。この問題は恐らくIEのバグによるものだと思うのですが、その判断も確実とはいえません。


自分が調査できたのはここまでです。以下はダミーのURLです。

http://q.hatena.ne.jp/

id:mwys

確かに。子テーブルにしても影響が出るのが面白いです。1番目の回答をお読みいただき再度ご返信いただけるとうれしいです。

2007/09/16 19:48:07
id:tailshade No.4

tailshade回答回数14ベストアンサー獲得回数32007/09/16 21:41:06ここでベストアンサー

ポイント50pt
<html>
<body>
<table width="100%" border="1">
<tr>
<td colspan="2">
<table width="100%" border="1">
<tr>
<td align="left" width="100px">a</td>
<td align="center">b</td>
<td align="right" width="100px">c</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="150px; width: 1%;" align="left"><div style="width: 150px;">test</div></td>
<td align="left">test</td>
</tr>
</table>
</body>
</html>

このように「2行目の1カラム目」の横幅を非常に小さい割合にし、カラム内に150pxのブロック要素を置けば一応は固定幅になることを確認しました。

一応と書いた理由はウィンドウのサイズを変更すると1-2px程度カラムの大きさが変化してしまうためです。


Web上で色々と検索してみましたが、やはりIEのバグの線が濃厚でした。

id:mwys

バグなのですね。いくらやってもできないわけです。というかDIVタグでやれってことですかね(^^;

2007/09/17 03:41:53
id:makoohira No.5

makoohira回答回数136ベストアンサー獲得回数42007/09/16 23:26:55

ポイント30pt

Operaでも発生したので、IE系から派生したブラウザ全般のバグですね。

2行目の1カラム目を、width=150のブロック要素(table、div、pなど)に入れたり、150pxのイメージを入れたりしておいて、

2行目の2カラム目に、width=100%を指定すれば、ムリヤリ表現できます。

id:mwys

4番の回答でもOKでしたが、こちらの方法でもOKですね。

2007/09/17 03:45:06

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません