人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

<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です。

●質問者: mwys
●カテゴリ:ウェブ制作
✍キーワード:IE6 カラム ブラウザ レイアウト 邪道
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● GoldenDawn
●10ポイント

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

◎質問者からの返答

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

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


2 ● longring
●5ポイント

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

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


3 ● tailshade
●10ポイント

とりあえず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/

◎質問者からの返答

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


4 ● tailshade
●50ポイント ベストアンサー
<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のバグの線が濃厚でした。

◎質問者からの返答

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


5 ● makoohira
●30ポイント

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

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ