表格布局display: table的妙用
说到表格布局，相信大家首先想到的是
<table>标签，其实，在CSS2中还提供了一种表格布局：display: table，今天刚好用到，就有必要来深究一下了！虽然CSS3已经出现了
display： flex（Flex布局）和display: grid（CSS：Grid布局），但这两个还是有兼容性的，而且存在即有用处，当你使用过display: table，你才发现用处还是不少的。首先来看看
display: table的兼容性：可以看到，除非你还要跟IE6/7较劲，否则display: table不需考虑兼容性。
接下来看看关于table的display可选值：
table：指定对象作为块元素级的表格，相当于html标签<table>inline-table：指定对象作为内联元素级的表格，相当于html标签<table>table-caption：指定对象作为表格标题，相当于html标签<caption>table-cell：指定对象作为表格单元格，相当于html标签<td>table-row：指定对象作为表格行，相当于html标签<tr>table-row-group：指定对象作为表格行组，相当于html标签<tbody>table-column：指定对象作为表格列，相当于html标签<col>table-column-group：指定对象作为表格列组显示，相当于html标签<colgroup>table-header-group：指定对象作为表格标题组，相当于html标签<thead>table-footer-group：指定对象作为表格脚注组，相当于html标签<tfoot>
还有一些协助属性：
border-collpase：用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。border-spacing： 规定相邻单元格边框之间的距离（只适用于 边框分离模式 ）。相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。table-layout：定义了用于布局表格单元格，行和列的算法。（auto：表格及单元格的宽度取决于其包含的内容。fixed：表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。）vertical-align：用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
从上面的各个属性可以看到，不用
<table>标签，我们完全可以实现表格布局。下面看看四个实例：
- 响应式布局
- 自动占满剩余空间
- 动态垂直居中对齐
- 动态水平居中对齐
如有疑问，欢迎在下方评论区留言！
关注”全栈技术杂货铺“
