简单table样式记录demo

最新推荐文章于 2020-06-03 11:35:47 发布
最新推荐文章于 2020-06-03 11:35:47 发布
阅读量792 收藏 1
点赞数
分类专栏： 学习 HTML Web开发 文章标签： 表格样式 代码 效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wynwdblh/article/details/104146073
版权
学习 同时被 3 个专栏收录
29 篇文章 0 订阅
订阅专栏
Web开发
10 篇文章 0 订阅
订阅专栏
HTML
3 篇文章 0 订阅
订阅专栏

demo： 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style type="text/css">
		.th-div,.th-in{
			width:100px;
			height: 50px;
		}
		.td-div,.td-in{
			width: 250px;
    		height: 70px;
    		font-size: 14px;
		}
		/*
		.th-div,.td-div{
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			cursor: pointer;
		}
		*/
		.th-div,.td-div{
			table-layout: fixed;
		    white-space: normal;
		    word-break: break-all;
		    width: 100%;
		    overflow: hidden;
		    height: 60px;
		}
		/*
		.th-in,.td-in{
			overflow: hidden;
		}*/
		/* 布局 */
		.t-left,.t-centrel,.t-right{
			float: left;
		}
		.t-left,.t-right{
			height: 10px;
			width: 200px;
		}

	</style>
</head>
<body>
	<div>
		<div class="t-left">
			<!-- left -->
		</div>
		<div class="t-centrel">
			<table border="1" cellpadding="10" cellspacing="0">
				<thead>
					<tr>
						<td class="th-in"><div class="th-div">header1</div></td>
						<td class="th-in"><div class="th-div">header1</div></td>
						<td class="th-in"><div class="th-div">header1</div></td>
						<td class="th-in"><div class="th-div">header1</div></td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="td-in"><div class="td-div">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div></td>
						<td class="td-in"><div class="td-div">222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div></td>
						<td class="td-in"><div class="td-div">33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div></td>
						<td class="td-in"><div class="td-div">4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div></td>
					</tr>
					<tr>
						<td class="td-in"><div class="td-div">5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div></td>
						<td class="td-in"><div class="td-div">66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</div></td>
						<td class="td-in"><div class="td-div">777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777</div></td>
						<td class="td-in"><div class="td-div">8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888</div></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="t-right">
			<!-- right -->
		</div>
	</div>
	
</body>
</html>

picture：

 

oo_smile
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table与tab页css样式与demo.zip
12-14
原生html中好看的table与tab页两种css样式和demo (table中th的颜色可以替换成#E4EDF9更美观)
bootstrap-table-demo-
05-17
bootstrap-table是一个功能强大的table组件，支持分页、全文检索、导出等
【BootStrap】--具有增删改查功能的表格Demo
慢慢的长大
09-14 5万+
bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。
四个好看的table表格样式
热门推荐
下半夜的风
10-24 7万+
1. 单像素边框CSS表格 table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } ta
BootStrapTableDemo
06-05
该bootStrapDemo包含两种样式的表格，封装的表格具有增删改查的功能。一种表格是Datatable,另外一个表格是StuPersonInfo2。前台主要采用的html5+Css3+bootstrap+MVC，希望我写的小demo为大家省一些力气。
table 表格宽度拖动demo
09-08
"table 表格宽度拖动demo"就是一个专门针对这一需求的示例，它展示了如何实现用户可以通过拖动来调整表格列宽的功能。 首先，我们需要理解HTML中的`<table>`元素，它是创建表格的基础。`<table>`包含`<thead>`...
bootstrap table表格行记录移动
03-16
每个表格都应包含`<table>`标签，并使用`class="table"`应用Bootstrap样式。例如： ```html <table id="sourceTable" class="table"></table> <table id="targetTable" class="table"></table> ``` 接下来，我们...
微信小程序学习类Demo：合肥教室代课（table页面切换）
03-15
对于敏感操作，如代课记录的添加或修改，可能需要用户授权。 在"合肥教室代课（table页面切换）"这个项目中，开发者可以学习到如何创建和管理表格，如何处理用户交互，以及如何实现页面间的跳转。这是一个很好的...
razor table分页、隔行变色 table_pages_color_demo
09-24
本示例“razor table分页、隔行变色 table_pages_color_demo”专注于如何在网页上展示数据，同时实现表格的分页功能和隔行变色效果，以提高用户体验。 首先，我们需要理解`razor`语法。Razor视图引擎的核心是`....
displaytag-DEMO.zip_DEMO_displaytag de_displaytag demo_displayta
09-19
开发者只需指定每页显示的记录数，DisplayTag会自动处理剩余的工作。 3. **排序** DisplayTag支持列点击排序，用户可以通过点击表头对数据进行升序或降序排序。这个功能对于数据分析和查看大量数据时非常有用，...
几种实用table样式
03-29
几种实用table样式
table完美css样式，table的基本样式，table样式
weixin_33971130的博客
06-15 2041
table完美css样式，table的基本样式，table样式   &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;
bootstrap-table-demo说明
ymruse的博客
11-27 3811
bootstrap-table-demo说明文档
较为复杂的表格样式Demo
编程开发资料库
01-09 458
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
Bootstrap简单模板与基本表格
晓剑
08-05 2万+
一：页面套用          模板下面专门有个内容页是空白的页面blank page,方便我们套用，右边菜单我们把不需要的删除掉就留几个就可以了                     内容的位置我们右键源码可以很方便的看到，          其实他注释和样式名称表达得很清楚，这个(class="container-fluid")样式下面的就是放得内容了
H5-表格的基本样式
chenzhaoxiong123的博客
11-01 1万+
1.选择器 类选择器：通过给标签元素起一个classname类名 的方式，在编写样式的时候，用类名来获取该元素 .div1{ width:200px; height:200px; background-color:blue; } id选择器： 给元素起一个id名，用来获取该元素，设置样式的时候使用一个元素即可以同时有id名和类名 #div2{
使用CSS格式化Table样式
lecui的专栏
05-15 4766
在网页里使用table的时候，样式一般比较难管理，因为table的有些样式与其它控件不太一样1、table的分外边框，tr边框，td边框，它们之间都是有间距的2、你可以指定它们之间的间距为0，但当你设置边框时，会发现边框是2px宽的，因为在table里，tr、td等元素是相邻的所以想做一个好看的table样式可以参考以下的步骤：1、table设置 border-collapse
freemarker/ftl模板-样式种类
FengZ1的博客
06-03 4503
<w:pPr> 段落样式------------------------------------------------ <w:jc w:val='center'/> 对齐方式 left,right center <w:tc>单元格样式----------------------------------------------- <w:gridSpan w:val="2"/> 左右合并2个单元格 <w:vmerge w:val="restart.
一个vue页面带样式得表格demo
最新发布
05-27
以下是一个基于Vue.js的带样式的表格示例： ``` <template> <div class="table"> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr v-for="user in users" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { users: [ { id: 1, name: "John", email: "john@example.com" }, { id: 2, name: "Jane", email: "jane@example.com" }, { id: 3, name: "Bob", email: "bob@example.com" }, ], }; }, }; </script> <style> .table { margin: 20px; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f2f2f2; } </style> ``` 该示例使用了`<table>`标签创建了一个表格，使用了Vue.js的`v-for`指令循环渲染了数据，并且使用了CSS样式来美化表格的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值