お世話になります。
IE8でのレイアウト崩れの修正をしたいのですが、
レイアウトの仕組みを理解してないこともあり手のつけ方がわかりません。
(px、パーセントによる画面のレンダリングエンジンの動き)
学習できるお勧めのサイトと現場経験があるからこその助言がありましたらお願いします。
○状況
テーブルのヘッダ部分のセル幅と、データ部分のセル幅にずれが生じています。
具体的にはデータ15までのセル幅がちぢまっていますが、テーブル自体の幅はヘッダ部分、データ部分ともに同じです。5のセル幅は後半に行くにつれずれが少なくなっていきます。
データ1
(末尾あたりのセルまで行くと幅はヘッダのセルと同じになります)
データ部分のセル幅のずれを直したいです。
○前提
IE8、IE11でレイアウトが崩れないようにする必要があります。
IE11での画面確認の際にはずれを確認できなかったと思います(ちょっと怪しいです..)
IE8での確認において同じような構成の画面がありますがそちらではずれが生じていません。
このテーブルの構成等は共通部品で定義されています。(他画面にも影響がでるので構成は変えません)
下記のコードはかなり簡略化した一部です、本来はネストが深く、class等付いてます。
○解説
ヘッダ部分、データ部分のテーブル幅はpxで指定されています。
ヘッダ部分のセル幅はmin-width、max-widthで設定されています。
データ部分のセル幅は特に指定されていません。
(ヘッダ部分のセル幅と同じようにmin-width、max-widthを使いましたが変化ありませんでした)
データ部分のセルの中にはlabelやbuttonやdivなどあります。
○追記
1)
ヘッダ部分でのmin-width、max-widthで各セルの幅を決めています。
例:min-width : 100px、max-width: 100px
2)
ヘッダ部分はHTMLで書かれていますが、
テーブル部分はjavascriptによって表示されています。
<table> <tr> <th>ヘッダ1</th> <th>ヘッダ2</th> <th>ヘッダ3</th> <th>ヘッダ4</th> <th>ヘッダ5</th> </tr> </table> <table> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> <td>データ4</td> <td>データ5</td> </tr> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> <td>データ4</td> <td>データ5</td> </tr> <!-- 行が続きます --> <table>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/23 10:58
2015/08/23 13:21