web-dev-qa-db-ja.com

TD内で相対/絶対位置を使用していますか？

私は次のコードを持っています：

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>

これはまったく機能しません。何らかの理由で、position [relative]コマンドがTDで読み取られておらず、通知DIVがページの下部にあるコンテンツコンテナーの外側に配置されています。 TDのすべてのコンテンツを次のようなDIVに入れようとしました。

<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>

ただし、これにより新しい問題が発生します。テーブルセルのコンテンツの高さは可変であるため、通知DIVは常にセルの下部にあるとは限りません。テーブルのセルが60pxマーカーを超えて伸びているが、他のセルがどれも伸びていない場合、他のセルでは、DIVは下ではなく60pxにあります。

htmlpositionhtml-table
105
Jason Axelrod

これは、 CSS 2.1 に従って、テーブル要素に対するposition: relativeの効果が定義されていないためです。これの例として、position: relativeはChrome 13に対して望ましい効果がありますが、Firefox 4ではそうではありません。ここでの解決策は、コンテンツにdivを追加し、その上にposition: relativeを置くことですdivの代わりにtd。以下は、position: relative（1）div good）、（2）td（no good）、最後に（3）div（good）内のtdで得られる結果を示しています。

On Firefox 4

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>
182
avernet

このトリックも適していますが、この場合、alignプロパティ（middle、bottomなど）は機能しません。

<td style="display: block; position: relative;">
</td>
5
Sergey Onishchenko

2回目の試みに関して、垂直アラインを使用してみましたか？どちらか

<td valign="bottom">

またはCSSで

vertical-align:bottom
2
Kyle

テーブルセルの内容は、可変の高さで、60ピクセルを超える場合があります。

<div style="position: absolute; bottom: 0px;">
    Notice
</div>
2
Xavier Deva Arul