Takazudo Clipping*

<table>
    <tr>
        <td>
            <p class="whatIdid">I played game whole day today.I played game whole day today.I played game whole day today.I played game whole day today.I played game whole day today.I played game whole day today.I played game whole day today.</p>
            <p class="date">2007/12/27</p>
        </td>
        <td>
            <p class="whatIdid">I played game whole day today.</p>
            <p class="date">2007/12/27</p>
        </td>
    </tr>
</table>

td{
    position:relative;
    width:50%;
}
p.whatIdid{
    padding:0 0 20px;
}
p.date{
    position:absolute;
    bottom:0;
    right:0;
    border:1px solid red;
}

• サンプルHTML

Firefoxでは上のようなイメージの結果にはならない。ページの右下隅に日付が吹っ飛ぶ。IEでは上のようになるんだけれども、これはFirefoxが間違っているわけではない。むしろIEが独自の実装してる。

CSS2.1のVisual formatting model - postion propertyのrelativeの説明にはこうある。

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

CSS2.1 - Visual formatting model - 9.3.1 Choosing a positioning scheme: 'position' property

テーブルの中身系のdisplayプロパティに対するposition:relativeの指定は、定義されていない。とのことで無視されちゃうらしいです。

ちなみにtableにposition:relative;を指定しても、tableを基準に絶対配置してくれないです。position:absoluteを指定した要素は、祖先のcontaining blockがposition:relative/absoluteのとき、そこを基準に絶対配置してくれるのですが、どの要素がcontaining blockを作るかは決まってる。最初のcontaining blockは、viewportっていう、ようするにブラウザの表示領域なんだけれども、それ以下の要素に関しては・・・

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block-level, table cell or inline-block ancestor box.

CSS2.1 - Visual formatting model details - 10.1 Definition of "containing block"

block-level / table cell / inline-blockが、このcontaining blockを作るんだけれども、tableはblock-levelっぽい振る舞いをするだけで実はblock-levelではないらしく、だめっぽい。Tableの項にはこんなふうにあった。

In terms of the visual formatting model, a table can behave like a block-level (for 'display: table') or inline-level (for 'display: inline-table') element.

CSS2.1 - Tables - 17.4 Tables in the visual formatting model"

behave like a block-level・・・ってことでblock-levelではないのか。ややこい・・・。まぁ表だし、しゃあないか。

仕方ないからあきらめてtableレイアウトにするか親にdivつくってなんとか頑張るしか。いつものposition:absolute!って思ってるとハマるかも。自分ならレイアウト調整のためにdivの高さ揃えるとかいうjs組んだりすると他の人が編集しづらくなるからここだけテーブルレイアウトにしちゃうかも。
IEは早くdisplay:tableに対応してください。