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。

如何使用表格作为页脚？

1 个答案: