html/css在表格中使用div

我有一個表格單元格，我希望在單元格頂部顯示一些內容，並在底部顯示其他內容。html/css在表格中使用div

我想在單元格內使用div來完成此操作，但它不工作。

對這個有限的任務使用css也可以，但是，重做整個頁面在CSS是不是一個選項，因爲整個網站是在表中佈局。

這裏的jsfiddle說明問題：

這裏是代碼*相同的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>

的任何建議非常感謝。

來源

2012-09-07 user1260310

'作爲整個網站佈局與表' - **那麼這是你的問題夫人！** –

一個css粉絲？你會怎麼做在CSS？ – user1260310

[使用CSS很容易]（http://jsfiddle.net/sellmeadog/rVqgn/），特別是在框架[960.gs]（http://960.gs）或[Bootstrap]（ http://twitter.github.com/bootstrap/） – sellmeadog

使用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>

請記住，你可能需要的風格，你浮向下使它看起來不錯的股利，但這種解決方案將滿足您的既定需求。

希望這會有所幫助！

來源

2012-09-07 20:34:54 Logard

但是，然後單元格的寬度將不再受'div'影響，導致一團糟：http://jsfiddle.net/SRtXD/5/ –

是這個解決方案的一個弱點，是的。我同意，通過任何方式都不是一個完美的解決方案，但使用表格時，您主要希望它們不要根據內容更改大小。這是爲什麼你會選擇一張表格來代替更靈活的佈局的主要原因之一。 – Logard

「底部」一詞在我觀看小提琴時沒有出現。你看到了嗎？ – user1260310

html/css在表格中使用div

回答

相關問題