如何使用表格作爲頁腳？

我正在嘗試使用當前處於頁面底部的表格作爲頁腳，它需要位於頁面底部，並且不會隨着頁面上下滾動而移動。如何使用表格作爲頁腳？

這是我到目前爲止有：

HTML：

<table> 
    <tr> 
    <td class="footer">Weather&nbsp;Station&nbsp;Davis Vantage Pro2</td> 
    <td class="footer">Page&nbsp;Updated&nbsp;14:46 01 November 2016</td> 
    <td class="footer">Powered&nbsp;By&nbsp;<a href="http://sandaysoft.com/products/cumulus" target="_blank">Cumulus</a>&nbsp;v3.0.0&nbsp;(3041)</td> 
    </tr> 
</table>

CSS：

.footer { 
    font-size: 10pt; 
    background-color: #FFFFFF; 
    color: #000000; 
    padding: 3px; 
    text-align: center; 
}

我一直在使用TBODY標籤的嘗試，但什麼都沒有改變。

感謝，

威廉

來源

2016-11-01 William Grimsley

這看起來不像表格數據。不要使用表格進行佈局。我們現在已經有了二十年的CSS了。 – Quentin

你如何使用表格作爲頁腳？你不......這就是如何 – mizurnix

表不建議布點。爲不同的頁面部分使用適當的標籤。在這種情況下，<footer>將是適當的。只需使用div標籤爲您的頁腳數據，並設置display: inline-block;爲他們出現在彼此相鄰。

此外，您可以使用position: fixed;結合bottom: 0;使您的頁腳粘到底部。我重新生成代碼，供大家參考：

footer > div { 
 
    font-size: 10pt; 
 
    background-color: #FFFFFF; 
 
    color: #000000; 
 
    padding: 3px; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
}

<footer> 
 
    <div>Weather&nbsp;Station&nbsp;Davis Vantage Pro2</div> 
 
    <div>Page&nbsp;Updated&nbsp;14:46 01 November 2016</div> 
 
    <div>Powered&nbsp;By&nbsp;<a href="http://sandaysoft.com/products/cumulus" target="_blank">Cumulus</a>&nbsp;v3.0.0&nbsp;(3041)</div> 
 
</footer>

查看更多關於<footer> tag on MDN。

來源

2016-11-01 14:54:32 andreas

謝謝，這是工作，但我需要的是唯一的佈局，他們在以前的頁面中顯示在此頁面上：http://newton-poppleford-weather.co。 uk/index.htm正如你所看到的，頁腳的排列方式與此不同。 –

不客氣，很高興我能提供幫助。我讚賞upvote/accept;）你已經在使用該頁面上的'

這一切都完成了，但我認爲我需要重新應用字體大小等是實際上在頁面底部或現在不是頁腳？ –

如何使用表格作爲頁腳？

回答

相關問題