跳转至

Table 布局

CSS 可以让 HTML 元素像表格那样排列。

下面是表格的各个 HTML 标签，所对应的布局模式。

  • table { display: table }
  • tr { display: table-row }
  • thead { display: table-header-group }
  • tbody { display: table-row-group }
  • tfoot { display: table-footer-group }
  • col { display: table-column }
  • colgroup { display: table-column-group }
  • td, th { display: table-cell }
  • caption { display: table-caption }

表格布局可以很简单地做到垂直居中。

div {
  height: 200px;
  display:table-cell;
  vertical-align: middle;
}

这种写法相比下面的写法，更容易理解。

div {
  height: 200px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

表格布局的另一个用途是，让页尾总是显示在浏览器的最低部，即使页面高度不足一页。

/*
  HTML 代码如下
  <body>
    <div class="main"></div>
    <div class="footer"></div>
  </body>
*/

body {
  display: table;
  width: 100%;
}

.main {
  min-height: 100%;
}

.footer {
  display: table-row;
  height:1px;
}

基于上面这种底部固定的技巧，可以使用表格布局，完成圣杯布局，即页面从上到下分成页首 + 内容 + 页尾三部分，其中内容部分又分成左边栏和右边栏。

/*
  HTML 代码如下
<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="main">
    <div class="box sidebar">Left-sidebar</div>
    <div class="box content">Main Content</div>
    <div class="box sidebar">Right-sidebar</div>
  </div>
  <div class="footer">FOOTER</div>
</div>
*/

.wrapper {
  min-height: 100%;
  display: table;
  width: 100%;
  text-align: center;
}

.header {
  display: table-row;
  height: 1px;
}

.main {
  min-height: 100%;
  display: table;
  width: 100%;
}

.box {
  display: table-cell;
}

.sidebar {
  width: 100px;
}

.footer {
  display: table-row;
  height:1px;
}

利用表格的不同性质的行，可以调整行的显示位置。

  • display:table-caption使得该行显示在表格的最顶部。
  • display:table-header-group使得该行显示在表格的头部，但是位置低于table-caption的行。
  • display:table-footer-group使得该行显示在表格的底部。

参考链接