IEでテーブルの列幅を固定できずに、苦戦しています。
幅500pxのテーブルに対して、幅100pxの列を3列表示したいと考えています。
以下、表示イメージ①
以下のようなコードで実現しようとしているのですが、chromeでは想定通りの表示(表示イメージ①)となっていますが、IEでは自動レイアウト(表示イメージ②)のような表示となってしまっています。
colタグで列ごとに幅をしていして、table-layoutプロパティで固定レイアウトのテーブルにしています。
HTML
1 <div style=" width:500px; border: 1px solid #2BF453;padding:3px;"> 2 <table border="1" style="table-layout:fixed; width:100%; border-collapse: collapse;"> 3 <colgroup> 4 <col style="width:100px;"> 5 <col style="width:100px;"> 6 <col style="width:100px;"> 7 <col style="width:100px;"> 8 <col style="width:80px;"> 9 </colgroup> 10 <tr> 11 <td>col1</td> 12 <td>col2</td> 13 <td>col3</td> 14 </tr> 15 <tr> 16 <td></td> 17 <td>col2</td> 18 <td>col3</td> 19 </tr> 20 </table> 21 </div>
解決策としては、以下のように空のtdタグを設定するという方法しか思いつかないのですが、
他に解決方法がありますでしょうか。
HTML
1 <div style=" width:500px; border: 1px solid #2BF453;padding:3px;"> 2 <table border="1" style="table-layout:fixed; width:100%; border-collapse: collapse;"> 3 <tr> 4 <td style="width:100px;">col1</td> 5 <td style="width:100px;">col2</td> 6 <td style="width:100px;">col3</td> 7 <td style="width:100px;"></td> 8 <td style="width:80px;"></td> 9 </tr> 10 <tr> 11 <td></td> 12 <td>col2</td> 13 <td>col3</td> 14 </tr> 15 </table> 16 </div>
※なお、黒の枠線はわかりやすくするためにつけているだけなので特に気にしないでください。
回答1件
あなたの回答
tips
プレビュー