当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。
网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。下面来模仿显示一个表格。
使用CSS表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>基于display的 css table </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.container{margin:50px auto 0;text-align:center;width:300px;}
#table {display: table;border-collapse:collapse;width:200px; table-layout:fixed;background-color:pink;}
.row {display: table-row;}
.row:nth-child(2n){ background-color:#FE4902;}
.row:nth-child(2n+1){ background-color:orange;}
.odd{background-color:#FE4902;}
.even{background-color:orange;}
.cell {display: table-cell;border:1px solid #1FA834;padding:10px;width:10px;height:auto;}
.caption{display:table-caption;margin:8px auto;}
.colgroup{display:table-row;}
.col{display:table-cell;border:1px solid #1FA834;padding:10px;width:100px;height:auto;font-weight:bold;}
.wrapper{ white-space: nowrap;width: 10px;overflow: hidden;text-overflow: ellipsis;} /*让表格里面溢出的内容以...的形式显示*/
</style>
</head>
<body>
<div class="container">
<div id="table">
<div class="caption">基于display显示的table</div>
<div class="colgroup">
<span class="col">username</span>
<span class="col">email</span>
<span class="col">age</span>
</div>
<div class="row even">
<span class="cell">John</span>
<span class="cell">132455@qq.com</span>
<span class="cell">35</span>
</div>
<div class="row odd" >
<span class="cell">Nick</span>
<span class="cell wrapper">Joshtest@gmail.com</span>
<span class="cell">28</span>
</div>
<div class="row even">
<span class="cell">Lucy</span>
<span class="cell">joo@gmail.com</span>
<span class="cell">30</span>
</div>
</div>
</div>
</body>
</html>
如果想看到上面的效果图，需要在支持display：table的浏览器中打开。
不仅仅是可以用来以表格呈现数据，还可以用它来布局。我们不需要担心浮动的问题。
具体可以查看 下面的文章 地址：基于display:table的CSS布局
- 大小: 8 KB
分享到：
相关推荐
本资源"jQuery基于Bootstrap.js表格行展开收缩隐藏代码.zip"正是利用了这些特性，为表格数据的展示提供了更丰富的交互体验。 首先，我们来详细解释这个功能的工作原理。在网页中的表格，尤其是包含大量信息的表格，...
在表格合并的场景下，你可能需要用到CSS的`display: table`、`display: table-cell`等属性来布局表格，同时设置单元格的宽度、高度以及边框等样式。对于合并的单元格，可能需要设置特殊的样式，比如隐藏不需要显示的...
在示例代码中，创建了一个基于 `display: table` 的普通表格布局。`.table` 类设置为 `display: table`，使得整个容器以表格形式呈现。`.table-tr` 类代表表格行，`.table-th` 和 `.table-td` 分别表示表头和数据...
例如，`display:table`标签可以用于显示数据列表，而`pager-taglib`则负责在表格下方生成分页导航。这样，用户既可以查看表格中的数据，也可以方便地跳转到不同页码进行浏览，实现了数据展示和交互的完美结合。 5. ...
Wi-Fi Display是一种无线显示技术，它允许用户通过无线网络将视频、音频和图像内容从一个设备传输到另一台支持Wi-Fi...此外，产品可用性和交货条件完全取决于各自的订单确认表格，这同样适用于基于开发样机交付的订单。
IDT公司推出的创新产品——IDTPanelPort ViewXpand解决方案，是基于VESA DisplayPort标准的控制器，无需额外的图形卡即可实现全面的高清多显示器功能。这一解决方案可以被集成到笔记本电脑、坞站、独立适配器以及...
源码中可能包含了多个ASP文件，这些文件分别负责不同的功能模块，如用户登录验证、表格显示、数据增删改查等。在解压后，我们通常会看到如"login.asp"、"table_display.asp"、"edit_data.asp"等文件，这些文件分别...
Display Tag是一个强大的Java Web表格标签库，它提供了丰富的表格展示功能，包括排序、分页等。使用Display Tag进行分页，可以在JSP页面上通过简单的标签实现，减轻了前端开发的工作量。 Display Tag的分页功能主要...
通过设置`display: flex`和相关属性，我们可以轻松地实现表格单元格的灵活排列和对齐。而CSS Grid则适合二维布局，对于创建复杂的表格结构更为强大，可以定义网格线和单元格大小，实现精确的网格布局。 JavaScript...
Display Tag库是一个强大的开源Java库，专为Web应用程序提供表格和分页支持。本教程将详细讲解如何在项目中使用Display Tag实现分页功能。 首先，你需要在项目中引入Display Tag库。通常，这可以通过在`pom.xml`...
9. **表格排序**：虽然这不是CSS的直接功能，但结合JavaScript库，如jQuery DataTables，可以实现基于CSS的表格排序功能，增强功能性。 10. **性能优化**：尽管CSS能带来丰富的样式，但也需要注意性能。避免使用...
"Display Tag 1.1.1" 是一个用于Java Web开发的开源分页显示框架，专为呈现数据表格而设计。这个框架简化了在网页上展示大量数据的过程，提供了多种功能，如排序、分页、导出数据以及自定义样式等。在Java应用中，...
想实现这样一个功能，就是在一个表格中，由于很多字过多，所以用文字溢出的方法处理了，但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是...
Display Tag是一个基于Servlet 2.3规范的JSP标签库，它极大地简化了网页表格的渲染，提供了分页、排序、过滤、国际化等特性。通过使用Display Tag，开发者可以减少大量重复的HTML和JSP代码，提高代码的可读性和维护...
6. **表格配置**: 代码展示了如何配置表格的基本参数，包括表格ID（`tableId`）、表头标题（`headers`）、显示数据（`data`）、每页显示数量（`displayNum`）、页脚显示（`display_tfoot`）等。 7. **样式引用**: ...
致力于丰富数字媒体体验、提供领先的混合信号半导体解决方案供应商IDT公司(Integrated Device Technology)推出首款无需额外的图形卡就可实现全面高清多显示器能力的基于VESA DisplayPort的控制器。IDT PanelPort ...
DataTables是一款基于jQuery库的强大的表格插件，它极大地增强了HTML表格的功能，提供了丰富的排序、搜索、分页、列操作等交互性功能。这个插件的设计目标是为开发者提供一个高度可定制、易于使用的工具，使得网页上...
IDT公司推出首款无需额外的图形卡就可实现全面高清多显示器能力的基于 VESA DisplayPort? 的控制器。IDT PanelPort? ViewXpand? 解决方案可内置在笔记本电脑、坞站、独立的适配器或 DisplayPort 兼容的显示器上，...
EXTjs是一种基于JavaScript的富客户端应用框架，专用于构建交互式的Web应用程序。在EXTjs 4.0以下的版本中，开发人员可能会遇到合并表格单元格的需求，这在展示复杂数据或者组织信息时非常有用。EXTjs提供了强大的...
在描述中提到的博文链接（由于实际无法访问，以下内容基于一般情况的推测）可能提供了关于如何解决这个问题的具体解决方案或者分析。通常，这个问题源于前端分页与后端数据处理的分离。在外部分页模式下，前端只负责...