`

div实现table功能

    博客分类:
  • HTML
阅读更多
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
分享到:
评论

相关推荐

    table转div工具

    相比之下,div是一个无语义的容器,通过CSS可以实现流式、网格、定位等多种布局方式,适应不同设备和屏幕尺寸,更适合现代网页设计的需求。 "table转div工具"能够自动分析HTML中的table元素,将其转换为div结构,并...

    table转div、table转css

    标题"table转div、table转css"所指的就是这一过程,即利用特定工具将原本用表格布局的内容转化为更灵活的div+CSS布局。这种转换可以提高页面加载速度,提升用户体验,并更好地适应不同设备的显示需求。 描述中提到...

    Div仿制table送自定义Scrollbar支持排序

    为了解决这些问题,开发者们常常选择使用CSS和JavaScript来模拟表格(Div Table)以实现更丰富的功能。本主题"Div仿制table送自定义Scrollbar支持排序"正是探讨这种技术的应用。 首先,Div仿制table是通过CSS布局...

    div table的使用

    本文将深入探讨如何在服务器端利用存储过程生成`table`数据,并将其嵌入到`div`容器中,以实现更灵活的页面布局。 首先,`div`(division)是HTML中的一个块级元素,它主要用于对页面内容进行分组和布局。通过CSS...

    Table转div+css工具

    4. **支持响应式设计**:通过CSS的媒体查询功能,转换后的代码更容易实现跨设备兼容,适应不同屏幕尺寸的设备。 5. **增强可访问性**:对于无障碍浏览(Accessibility)来说,Div+CSS布局往往优于Table布局,因为它...

    div模拟table滚动时表头固定,兼容ie6

    标题“div模拟table滚动时表头固定,兼容ie6”正是针对这一需求,描述了如何使用div元素来模拟表格的滚动,并确保在滚动过程中表头能够固定显示,同时实现列宽的自动适配,使得表头边框与表体边框对齐。 在传统的...

    css+div和table+css的比较

    4. **响应式设计**:CSS3 提供的媒体查询等功能,使得基于 div 的布局更易实现响应式设计,适应不同设备的显示需求。 table+css 的优势主要在于: 1. **数据展示**:对于表格数据,table 元素提供了天然的结构,使...

    div模拟table兼容ie620140424

    描述中提到,目标是实现table的自适应功能,以及表头的列宽与表体列宽保持一致,以保证边框对齐。 在HTML中,table元素用于展示结构化的数据,但在某些情况下,如为了实现更复杂的布局或提高性能,开发者会选择使用...

    javascript拖动div或table等网页元素

    JavaScript 提供了实现这一功能的强大支持,特别是对于div、table等网页元素的拖动操作。在这个主题中,我们将深入探讨如何使用JavaScript来实现这些元素的拖放功能,并兼容不同的浏览器,包括IE、Firefox、Opera和...

    css+jquery完美实现table表头固定显示(浮动)

    总的来说,结合CSS的`position: fixed`和jQuery的事件监听及样式调整,我们可以轻松实现table表头的固定显示,使用户在滚动查看大量数据时仍能清晰地看到列标题,提升交互体验。在实际开发中,这种技术广泛应用于...

    jQuery实现Table分页跳转

    本教程将详细讲解如何使用jQuery实现Table的分页跳转。 一、jQuery分页原理 jQuery分页的基本思想是通过JavaScript动态加载或隐藏Table中的数据行,以实现分页显示。通常会结合后端接口获取数据,根据每页显示的...

    table转换div

    通过CSS,你可以精确控制div的布局、间距、边框、背景等属性,实现与原来表格相同或更优的效果。例如,使用`border-collapse: collapse;`来模仿表格的单线边框,用`padding`来设定单元格内的内容间距。 6. **响应式...

    Html Table 转 Div 工具

    "Html Table 转 Div 工具"是一个帮助开发者将原有的HTML表格结构转换成基于Div的布局工具,这种转换在现代网页设计中尤为常见,因为Div更利于实现响应式设计和CSS3的高级样式。 在HTML中,表格通过`&lt;table&gt;`, `&lt;tr&gt;...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    在本文中,我们将深入探讨如何使用jQuery UI库实现一个功能,即允许用户将div元素的值拖拽到HTML表格中。这个功能对于构建交互式、动态的网页界面非常有用,可以提升用户体验,使得数据操作更加直观和便捷。我们将...

    js实现table分页可以动态生成table

    在JavaScript中实现表格(table)分页是一种常见的需求,特别是在数据量较大的网页应用中,为了提高用户体验和加载速度,我们通常会将数据分页展示。本文将深入探讨如何使用JavaScript来实现这一功能,并结合给定的...

    div和table横向和纵向滚动条问题

    本文将详细解释如何实现这个功能,主要涉及`div`和`table`元素的布局、CSS样式以及滚动条的控制。 首先,为了实现横向滚动条,我们需要将`table`元素包裹在一个`div`容器内。这个`div`设置`overflow-x:auto`属性,...

    div和table在网站中的可用性比较.docx

    使用 `div` 进行布局的优点在于它可以实现更灵活的页面结构,有利于实现响应式设计,适应不同设备的显示需求。同时,`div` 有助于提高代码的可读性和可维护性,因为它将内容和表现分离,使得样式可以集中管理,减少...

    div+tabel样式 仿136邮件上传功能实现

    在本文中,我们将深入探讨如何使用`div`和`table`元素,以及如何结合SQL Server数据库和Visual Studio来实现一个类似136邮件系统的文件上传功能。首先,让我们逐一了解这些知识点。 **div和table样式**: 在网页...

    Table2CSS表格转CSS+DIV布局工具

    【标签】中,“Table2 CSS”表明了软件的主要功能,即处理表格并转换为CSS;“表格”是转换的对象,HTML表格在网页设计中常见但有时不利于页面优化;“CSS+DIV”是转换的目标,这种布局方式更符合现代网页设计的标准...

    表格通过div+css现实对角线列表功能

    通过查看源代码,我们可以看到具体的HTML结构和CSS样式,这有助于理解实现这个功能的具体步骤。 在实际应用中,这种技术常用于创建自定义的布局,例如进度条、评分系统或者有特殊视觉效果的导航菜单。掌握这种技术...

Global site tag (gtag.js) - Google Analytics