1

データを表示する HTML テーブルを作成しています。テーブルにはさまざまな数の列がありますが、列の幅を一定にするために、同じ数の「バックグラウンドの列」を維持したいと考えています。

これの理由は私のアプリケーションに固有のものであり、これはバグのように見えるため、問題とは関係ありません (または、 と がどのように機能するかを誤解していcolますcolgroupか?)

ここに示す HTML では、実際の列の数を 2 に減らしています。

このようなものを使用してテーブルを作成し、CSS で要素colgroupの幅を設定します。col

表1：

<table>
    <colgroup>
        <col />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td colspan="1">col1</td>
            <td colspan="1">col2</td>
        </tr>
        <tr>
            <td colspan="2">col1</td>
        </tr>
    </tbody>
</table>

表 2:

<table>
    <colgroup>
        <col />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td colspan="2">col1</td>
        </tr>
        <tr>
            <td colspan="2">col1</td>
        </tr>
    </tbody>
</table>

CSS:

col {
    width:100px;                
}

これらのテーブルはどちらも、FireFox、Chrome、IE7、および IE8 (「IE」は「Internet Explorer」を表します) で適切にレンダリングされます。ただし、IE9 では、表 2は 1 列の幅でレンダリングされます。

ありとなしの両方を試しましたtable-layout: fixed

これらのテーブルとすべての空白を削除したテーブルをいじって、これが IE9 のテーブル レンダリング バグとは関係ないことを示しました: http://jsfiddle.net/ketnp/1/

4

0 に答える 0