0

I have a table cell in which I would like some content to display at the top of the cell and other content at the bottom.

I am trying to use a div within the cell to accomplish this but it is not working.

Using CSS for this limited task would be fine too, however, redoing the whole page in css is not an option as the whole site is laid out in tables.

Here jsfiddle illustrating problem:

JSFiddle

Here is code *same as in jsfiddle:

<table border="1">
    <tr>
        <td rowspan="2" valign="top">cell 1<div style="align-vertical: bottom">
            want at bottom</div>
        </td>
        <td>cell 2<br>
        <br>
        <br>
        </td>
    </tr>
    <tr>
        <td>cell 3</td>
    </tr>
</table>
4

1 に答える 1

2

thisからの回答を使用して、含まれる要素の下部に div を配置する方法を学習できます。

あなたのフィドルは次のようになります。

<table border=1><tr><td rowspan=2 style="position:relative" valign="top">cell 1<div style="position:absolute; bottom:0">bottom</div></td><td>cell 2<br><br><br></td></tr><tr><td>cell 3</td></tr></table>

見栄えを良くするために、下にフロートするdivのスタイルを設定する必要があることに注意してください。ただし、このソリューションは、指定されたニーズに適しています。

お役に立てれば！

于 2012-09-07T20:34:54.570 に答える