java自适应table_自适应布局之table实现

因为HTML流式布局的特性，水平分栏与垂直对齐的实现都不是那么的直观。尤其自适应三栏布局应用非常广泛，通常有两列是固定宽度的，另外一列根据屏幕大小自适应宽度(比如百度音乐、百度云等)。自适应三栏布局可以说是前端工程师面试的必选题目。

效果图

水平分栏有多种实现方式，最简单直观的是基于table的实现，这便是本文主要讨论的内容。先看我们要实现的效果图：

HTML框架

Left content

Center content

Right content

首先声明一个

。而这三列才是我们想要的内容，分别为左边栏、中间部分、右边栏。 CSS 接着稍微来点CSS，让我们能够看得更清楚： table{ height: 350px; margin: 10px; border: 1px solid grey; } #center { width: 100%; } #left, #right { min-width: 200px; background-color: lightyellow; } 这样便达到了截图中的效果。Table自适应布局的关键在于自适应的那一栏宽度应当设置为100%，固定宽度的两栏应设置min-width(注意不是width！)。 Div模拟Table 看官想必已经发现了，我们要显示的只是三栏内容，却添加了很多语义并不直观的 等元素。我们完全可以通过没有语义的 来简化HTML： Left content Center content Right content 我们只需要设置三栏的display属性为table-cell： .table-layout div{ display: table-cell; } .table-layout{ height: 350px; margin: 10px; border: 1px solid grey; } 这时#left和#right(黄色部分)并没有充满整个父容器.table-layout，如下图： 这是因为如果一个元素被设置为table-cell，浏览器会在渲染时给它外层包装一个table-row以及table。但这个table是嵌入在div.table-layout里面的，并未充满整个div.table-layout的高度。我们只需要将div.table-layout设置为table，浏览器便不会包装那个table了： .table-layout{ display: table; } 至此已经达到了和 优缺点 Table布局的优点就是实现简单，还可以通过Table嵌套来实现复杂的布局。但Table的问题也很显著：布局死板。Table是非常可靠的布局方式，一个 永远不会与另一个 有交错和遮挡。 冗余的HTML。随着HTML和CSS相关规范的演进，我们倾向于认为样式应当由CSS来处理，而HTML应当尽量保持有语义。 大表格的性能问题。我们知道HTML是流式布局的，后面的元素理论上讲不会影响前面元素的渲染，然而Table中后续行的列宽将会引起前面行的回流和重绘。 因此推荐本文只供学习和面试用。 欢迎关注天码营微信公众号： TMY-EDU 小编重点推荐：天码营网站