基于display:table的CSS布局
第 1 页 基于display:table的CSS布局 [1]
第 2 页 基于display:table的CSS布局 [2]
第 3 页 基于display:table的CSS布局 [3]
应原书编辑要求，先在文章顶部给出链接：《Everything You Know About CSS Is Wrong》
http://www.sitepoint.com/books/csswrong1/
这本书是10月发行的新书，为了避免版权纠纷，如要转载本文请保留以上链接，并遵循该 CC2.5协议。
从 digital-web 的首页上看到一个标题党《Everything You Know About CSS Is Wrong》，被雷过之后仔细看了下原文，发现了一种新的CSS布局思路（其实就是详细介绍了display:table属性）。在IE6仍是王道的时代谈这种技术为时过早，全当是练习英文翻译贴出来给大家分享下，欢迎大家指点不足之处。
—————————以下是中文翻译——————————–
当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。
网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。
使用CSS表格
CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。
在深入了解这种方法之前，让我们先来写份HTML文档实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
? HTML head content…
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="nav">
? navigation column content…
</div>
<div id="extras">
? news headlines column content…
</div>
<div id="content">
? main article content…
</div>
</div>
</div>
</body>
</html>
这份HTML源代码满足了内容呈现方面的要求。先是导航栏，然后是附加栏，最后是内容栏。
我们同样需要将以下CSS样式应用上去：
#main {
display: table;
border-collapse: collapse;
}
#nav {
display: table-cell;
width: 180px;
background-color: #e7dbcd;
}
#extras {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}
#content {
display: table-cell;
width: 380px;
padding-left: 10px;
}
这种基于表格的新CSS布局方式能够正确的在IE8、Firefox、Safari和Opera（译者注：包括FF2/FF3/Google都通过了测试）中显示出来。下面这张图片是它在IE8中的样子：
我们轻松实现了三栏等高布局，而无需使用伪造背景图片之类的技巧，更不用担心定位和清除浮动的问题！
分享到：
相关推荐
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的...
`display: table-cell` 是一个在 CSS 中实现此类布局的有效方法，它利用了表格单元格（table-cell）的特性来实现列的自适应。这种方法在处理不同屏幕尺寸和设备时能够保持内容的对齐和比例。 在标题和描述中提到的...
"利用层的table-row、table-cell属性进行页面布局"是一种常见的CSS布局技术，尤其在早期的Web开发中广泛使用，尽管现代CSS布局如Flexbox和Grid已变得更为流行。这种布局方法模仿了HTML表格的行(row)和单元格(cell)...
总的来说，`display: table-cell` 是一种强大的CSS布局工具，尤其适用于创建灵活的网格系统和对齐内容。尽管存在浏览器兼容性问题，但在现代浏览器环境中，它可以为设计师和开发者提供更多的布局可能性。通过巧妙地...
在描述中提到的“table布局网页转换为div+CSS布局的转换软件”能够快速高效地完成这一转变，无论是对于简化网页代码，还是提升网页性能，都有显著效果。 软件支持绝对定位和流定位，这意味着它可以处理复杂的布局...
在CSS布局中，`display`属性是一个至关重要的样式规则，用于定义元素的显示方式。`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，...
例如，可以结合使用display:table-cell和display:inline-block的方法，或者使用CSS的Flexbox布局技术，后者提供了更为灵活和强大的布局控制，包括垂直和水平居中。 总结一下，通过display:table-cell实现div垂直...
在CSS布局中，`display`属性是至关重要的，它决定了元素如何显示以及与其他元素之间的交互方式。本篇文章将详细介绍`display:inline-block`这一属性的使用方法及其应用场景，并通过实例帮助读者更好地理解其工作原理...
2. `display: table`、`display: table-column`和`display: table-row`：这些是CSS表格布局的一部分，它们将元素模拟为HTML表格的相应部分。`display: table`使元素表现为表格容器，`display: table-column`将其表现...
在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素呈现样式的语言，而表格（Table）则是组织数据的重要方式。本教程将详细讲解如何使用纯CSS来制作一个人口统计表格的样式布局。 首先，我们需要...
总的来说，`display`属性是CSS布局中的核心工具，通过灵活运用它可以实现各种布局效果，从传统的块状布局到现代的响应式设计。熟练掌握`display`属性的应用，将有助于我们创建更加美观和功能丰富的网页。
在这种情况下，可能需要结合使用其他CSS布局技术，如Flexbox或Grid布局。 总的来说，`display: table-cell`属性提供了一种在不使用`<table>`标签的情况下，利用CSS实现表格布局的方法，让开发者在保持灵活性的同时...
1. **CSS3表格布局**：在CSS3之前，表格布局相对固定，但CSS3允许我们使用`display`属性调整表格元素的行为。例如，`display: table`、`display: table-row`、`display: table-cell`等可以让我们模仿HTML表格的行为...
在这个项目中，我们将深入探讨如何使用纯CSS来创建这种效果，以及为何选择使用表格布局（Table CSS）。 首先，让我们理解什么是Table CSS。Table CSS并不意味着在HTML中使用`<table>`元素，而是指通过CSS的属性和...