<div> <h1>Title</h1> <table> ... </table> </div>
Теперь,
<h1>
имеет наценку: 0; так что это наверху div. Высота div составляет 300 пикселей.
Однако я бы хотел, чтобы стол располагался внизу div, например valign = "bottom", но для всей таблицы.
Вот что предложил Реми Шарп:
<style type="text/css" media="screen"> #container { position: relative; margin: 0; height:300px; border:1px solid #000; } #container h1 { margin:0; } #tableLayout { position: absolute; bottom:0; border: 1px solid #c00; } </style> <div id="container"> <h1>Title</h1> <table id="tableLayout"> <tr><td>example cell</td></tr> </table> </div>
Похоже, это работает!
Я разместил это здесь, так что оно всегда будет здесь
Попробуйте это: http://jsbin.com/emoce
Хотя это похоже на решение Дэррила. За исключением того, что я не использую position: absolute в упаковочном div, а скорее position: относительный, чтобы сделать позицию таблицы абсолютной.
Что по этому поводу:
<style type="text/css"> #container { position: absolute; margin: 0; height:300px; border:1px solid #000; } #container h1 { margin:0; } #tableContainer { position: absolute; bottom:0; } </style> <div id="container"> <h1>Title</h1> <div id="tableContainer"> <table id="tableLayout"> <tr><td>...</td></tr> </table> </div> </div>
Единственная проблема заключается в том, что div-контейнера и div-таблицы tableContainer должны быть в абсолютном положении. Не уверен, что это будет работать для вашего макета.