解決
<!DOCTYPE html>
ページを標準モードでレンダリングする必要があることをブラウザに示すために、ページの上部に表示する必要があります。
Internet Explorer 8+には、IE 7で表示されるようにページをレンダリングする互換表示設定が含まれています。デフォルトでは、すべてのイントラネットゾーンサイトは互換モードでレンダリングするように設定されているため、以下に概説する問題が発生します。ページを互換モードでレンダリングしないように強制するには、このメタタグを<head>
ページのセクションに追加できます。
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7;" />
私の場合、ASP.NETを使用しているので、便宜上、上記をカスタムヘッダーとして追加して、サイト内のすべてのページを標準モードでレンダリングします。
元の投稿
まず、私はIE 8を排他的に使用する環境で作業しているので、すべてのブラウザーで互換性のあるソリューションは必要ありません。IEだけです。
width = 100%のテーブルを表示するページがあり、最後の列のセルを除く各セルが特定の幅(この場合は200px)に設定されています。IEでレンダリングすると、意図したとおりに機能します。つまり、幅200pxの3x列を取得し、4番目の列は残りのスペースを占有します(ユーザーの画面解像度/ウィンドウサイズによって異なります)。
ただし、テーブルに行を追加し、この一番下の行がすべての列にまたがる場合、Internet Explorer 8および9は、この一番下の行のテキストの幅に応じて、指定された列の幅を完全に無視します。text-align:rightを最初の行の列に組み込むと、この動作はさらに異常になります。これを行うと、IEは列の間に使用できないスペースを挿入しながら、列の幅に応じてテキストを揃えます。これはスクリーンショットで最もよく示されています。
これは、テーブルがOpera 12で正しくレンダリングされているが、IE8または9では正しくレンダリングされていないことを示しています。問題を説明するために使用したHTMLは次のとおりです。
<html>
<head>
<style>
td{
background-color:#AAAAAA;
}
.s1{
text-align:right;
width:200px;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td class="s1">Col 1 a a a a a a a a a</td>
<td class="s1">Col 2 a a a a a a a a a</td>
<td class="s1">Col 3 a a a a a a a a a</td>
<td>Col 4</td>
</tr>
<tr>
<td class="s1">Col 1 a a a a a a v vv vv v v v</td>
<td class="s1">Col 2 a a a a a a v vv vv v v v</td>
<td class="s1">Col 3 a a a a a a v vv vv v v v</td>
<td>Col 4</td>
</tr>
<tr>
<td colspan="4">This text causes the table columns to expand xxxxxxx xxxxxxx xxxxxxxx xxxxxx aaaaaaa aaaaa aaaaaa aaaaaaaa aaaaa xxxxxxx xxxxxxx xxxxxxxx
xxxxxx aaaaaaa aaaaa aaaaaa aaaaaaaa aaaaa xxxxxxx xxxxxxx xxxxxxxx xxxxxx aaaaaaa aaaaa aaaaaa aaaaaaaa aaaaa xxxxxxx xxxxxxx xxxxxxxx xxxxxx aaaaaaa aaaaa aaaaaa
aaaaaaaa aaaaa</td>
</tr>
</table>
</body>
</html>
だから私の質問は、これをIEでOperaと同じようにレンダリングするには、何を変更する必要があるのかということです。指定した列を特定の幅に固定しながら、テーブルのサイズを動的に変更したいと思います。