div布局主要用到的css属性
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面测试</title>
<style type="text/css">
.table,.table*{
margin: 0 auto;
padding: 0;
font-size: 14px;
font-family: Arial, 宋体, Helvetica, sans-serif;
}
.table{
display: table;
width: 80%;
border-collapse: collapse;
}
.tab_tr {
display: table-row;
height: 30px;
}
.tab_th{
display: table-cell;
font-weight: bold; /*给标题字体加粗*/
height: 100%;
border: 1px solid gray; /*设置单元格边框*/
text-align: center;
vertical-align: middle;
}
.tab-td{
display: table-cell;
height: 100%;
border: 1px solid gray;
text-align: center;
vertical-align: middle;
</style>
</head>
<body>
<div>
<div class="table">
<div class="tab_tr">
<div class="tab_th">名称</div>
<div class="tab_th">key值</div>
<div class="tab_th">value值</div>
<div class="tab_th">创建人ID</div>
<div class="tab_th">创建时间</div>
<div class="tab_th">修改人ID</div>
<div class="tab_th">修改时间</div>
<div class="tab_th">删除标记</div>
<div class="tab_th">操作</div>
</div>
<div class="tab_tr">
<div class="tab-td">名称</div>
<div class="tab-td">key值</div>
<div class="tab-td">value值</div>
<div class="tab-td">创建人ID</div>
<div class="tab-td">创建时间</div>
<div class="tab-td">修改人ID</div>
<div class="tab-td">修改时间</div>
<div class="tab-td">删除标记</div>
<div class="tab-td">编辑|删除</div>
</div>
</div>
</div>
</body>
</html>
参考：https://www.cnblogs.com/joshinrai/p/6668392.html
分享到：
相关推荐
相比之下，div是一个无语义的容器，通过CSS可以实现流式、网格、定位等多种布局方式，适应不同设备和屏幕尺寸，更适合现代网页设计的需求。 "table转div工具"能够自动分析HTML中的table元素，将其转换为div结构，并...
标题"table转div、table转css"所指的就是这一过程，即利用特定工具将原本用表格布局的内容转化为更灵活的div+CSS布局。这种转换可以提高页面加载速度，提升用户体验，并更好地适应不同设备的显示需求。 描述中提到...
为了解决这些问题，开发者们常常选择使用CSS和JavaScript来模拟表格（Div Table）以实现更丰富的功能。本主题"Div仿制table送自定义Scrollbar支持排序"正是探讨这种技术的应用。 首先，Div仿制table是通过CSS布局...
本文将深入探讨如何在服务器端利用存储过程生成`table`数据，并将其嵌入到`div`容器中，以实现更灵活的页面布局。 首先，`div`（division）是HTML中的一个块级元素，它主要用于对页面内容进行分组和布局。通过CSS...
4. **支持响应式设计**：通过CSS的媒体查询功能，转换后的代码更容易实现跨设备兼容，适应不同屏幕尺寸的设备。 5. **增强可访问性**：对于无障碍浏览（Accessibility）来说，Div+CSS布局往往优于Table布局，因为它...
标题“div模拟table滚动时表头固定，兼容ie6”正是针对这一需求，描述了如何使用div元素来模拟表格的滚动，并确保在滚动过程中表头能够固定显示，同时实现列宽的自动适配，使得表头边框与表体边框对齐。 在传统的...
4. **响应式设计**：CSS3 提供的媒体查询等功能，使得基于 div 的布局更易实现响应式设计，适应不同设备的显示需求。 table+css 的优势主要在于： 1. **数据展示**：对于表格数据，table 元素提供了天然的结构，使...
描述中提到，目标是实现table的自适应功能，以及表头的列宽与表体列宽保持一致，以保证边框对齐。 在HTML中，table元素用于展示结构化的数据，但在某些情况下，如为了实现更复杂的布局或提高性能，开发者会选择使用...
JavaScript 提供了实现这一功能的强大支持，特别是对于div、table等网页元素的拖动操作。在这个主题中，我们将深入探讨如何使用JavaScript来实现这些元素的拖放功能，并兼容不同的浏览器，包括IE、Firefox、Opera和...
本教程将详细讲解如何使用jQuery实现Table的分页跳转。 一、jQuery分页原理 jQuery分页的基本思想是通过JavaScript动态加载或隐藏Table中的数据行，以实现分页显示。通常会结合后端接口获取数据，根据每页显示的...
通过CSS，你可以精确控制div的布局、间距、边框、背景等属性，实现与原来表格相同或更优的效果。例如，使用`border-collapse: collapse;`来模仿表格的单线边框，用`padding`来设定单元格内的内容间距。 6. **响应式...
"Html Table 转 Div 工具"是一个帮助开发者将原有的HTML表格结构转换成基于Div的布局工具，这种转换在现代网页设计中尤为常见，因为Div更利于实现响应式设计和CSS3的高级样式。 在HTML中，表格通过`<table>`, `<tr>...
在本文中，我们将深入探讨如何使用jQuery UI库实现一个功能，即允许用户将div元素的值拖拽到HTML表格中。这个功能对于构建交互式、动态的网页界面非常有用，可以提升用户体验，使得数据操作更加直观和便捷。我们将...
在JavaScript中实现表格（table）分页是一种常见的需求，特别是在数据量较大的网页应用中，为了提高用户体验和加载速度，我们通常会将数据分页展示。本文将深入探讨如何使用JavaScript来实现这一功能，并结合给定的...
本文将详细解释如何实现这个功能，主要涉及`div`和`table`元素的布局、CSS样式以及滚动条的控制。 首先，为了实现横向滚动条，我们需要将`table`元素包裹在一个`div`容器内。这个`div`设置`overflow-x:auto`属性，...
使用 `div` 进行布局的优点在于它可以实现更灵活的页面结构，有利于实现响应式设计，适应不同设备的显示需求。同时，`div` 有助于提高代码的可读性和可维护性，因为它将内容和表现分离，使得样式可以集中管理，减少...
在本文中，我们将深入探讨如何使用`div`和`table`元素，以及如何结合SQL Server数据库和Visual Studio来实现一个类似136邮件系统的文件上传功能。首先，让我们逐一了解这些知识点。 **div和table样式**： 在网页...
【标签】中，“Table2 CSS”表明了软件的主要功能，即处理表格并转换为CSS；“表格”是转换的对象，HTML表格在网页设计中常见但有时不利于页面优化；“CSS+DIV”是转换的目标，这种布局方式更符合现代网页设计的标准...
在本文中，我们将深入探讨如何使用JavaScript、CSS、DIV和HTML Table来实现C#中DataGridView控件的功能，尤其是实现单元格的动态编辑。在.NET框架下，DataGridView是用于展示和编辑数据的强大控件，但在Web环境中，...
"漂亮的网页后台模板（div+css+table）"这个主题着重于利用HTML的div元素、CSS样式以及表格（table）来设计出极具吸引力且功能完备的后台界面。 首先，让我们来了解一下`div`元素。在HTML中，`<div>`是一个通用容器...