html - 如何使用表格作为页脚？

Question

我正在尝试使用当前位于我页面底部的表格作为页脚，它需要位于页面底部并且不会随着您上下滚动页面而移动。

这是我目前所拥有的:

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 标签，但没有任何改变。

谢谢，

威廉

Answer 1

不推荐使用表格进行布局。为不同的页面部分使用正确的标签。在这种情况下 <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 的更多信息.