html tbale 中对tr td 做的一下操作总结 table样式 和几个例子 thead不动，tbody 滚动 和滚动条

最新推荐文章于 2024-07-12 00:07:26 发布
最新推荐文章于 2024-07-12 00:07:26 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： html table table样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42749765/article/details/96751124
版权
html 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
table
4 篇文章 0 订阅
订阅专栏
table样式
1 篇文章 0 订阅
订阅专栏

思路

先介绍个思路

  • 平常开发中可以在设置table 样式的时候总是不方便，
  • 在这里通过 border="0" cellpadding="0" cellspacing="0"
  • 这三个参数 对table 做了下 单元格无缝隙操作
  • 然后做各种样式在td th  或td th 内部的div中做样式 边框啥的就不会出现缝隙，也就可以做到一些想要的效果了
  • 比如做个tr 上下边框样式就用td th 或内部的div 做出效果

例子

 <table   border="0" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th><div class="s1">表名称</div></th>
                    <th><div class="s2">&nbsp;&nbsp;标签</div></th>
                    <th><div class="s3">所属系统</div></th>
                    <th><div class="s4" style="text-align:center;">操作</div></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

 

第二个总结的 滚动条

 

开发中会遇到tbody 进行滚动 thead 不滚动的场景

  • 一般情况设置了 display:block 就会出现如下情况 表格的td th  不会自动伸长
  •  
	body {padding: 100px 0 0 100px;}
	table {width: 500px;text-align:center;
	}

	table thead {
		width: 500px;
		display:block;
	}
	table tbody {
		width: 500px;
		height: 100px;
		display:block;
		overflow: auto;
	}
	table tbody tr td {
		border-bottom:1px solid #000; 
	}
	table thead tr th {
		border-bottom:1px solid #000; 
	}
	
</style>
<body>
	<table border="0" cellpadding="0" cellspacing="0"> 
			<thead>
				<tr><th>s1</th><th>s2</th><th>s3</th></tr>
		   </thead>
			<tbody>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
			   <tr><td>s</td><td>s</td><td>s</td></tr> 
		   </tbody>
	</table>
</body>

     

这个时候就要对td th设置宽度才可以

table tbody tr td {
		border-bottom:1px solid #000;
		width:100px;
	}
	table thead tr th {
		border-bottom:1px solid #000;
		width:100px;
	}
  • 就会出现如下

然后用js 计算一下宽度即可

 

 

列出一个滚动条的样式

 ::-webkit-scrollbar {
            width: 10px; /*对垂直流动条有效*/
            height: 10px; /*对水平流动条有效*/
        }
        /*定义滚动条的轨道颜色、内阴影及圆角*/
        ::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: rosybrown;
            border-radius: 3px;
        }
       /*定义滑块颜色、内阴影及圆角*/
        ::-webkit-scrollbar-thumb{
            border-radius: 7px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #E8E8E8;
        }
        /*定义两端按钮的样式*/
        ::-webkit-scrollbar-button { background-color:#E8E8E8;}
        /*定义右下角汇合处的样式*/
       ::-webkit-scrollbar-corner { background:khaki;}
  • 就是如下的滚动条

 

js 自动添加数据实现

页面代码
<table border="0" cellpadding="0" cellspacing="0"> 
			<thead></thead>
			<tbody></tbody>
	</table>


js code




//数据替换成自己需要用的数据
	var data = [{ "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }]

	//直接把表头和表内全部载入
	var addTableF = function (features) {
		var hthead = "";
		var htbody = "";

		hthead += '<tr>';//编写表头
		for (var j in features[0]) {
			hthead += '<th><div>' + j + '</div></th>';
		}
		hthead += '</tr>';

		for (i = 0, len = features.length; i < len; i++) {//编写表格
			htbody += '<tr>';
			for (var j in features[i]) {
				htbody += '<td><div>' + features[i][j] + '</div></td>';
			}
			htbody += '</tr>';
		}
		$("table thead").empty().html(hthead);
		$("table tbody").empty().html(htbody);
	}
	addTableF(data);
  • 数据量小的时候，不添加滚动条不加display:block 属性，会自动伸长到自适应宽度
  • 适用于小数据量情况，或分页情况

 

如下 设置一下table 的宽即可

 

计算宽度

  • 给每个td 中的div 设定宽度 每个加一个唯一的class
  • 通总宽度除以表格横向数量得到平均值
  • 然后如果有的宽有的窄，可以按照平均值*0.6 另一个*1.4实现
 $(".s1").css("width",(glb.glbwidth-100)/4*0.6+"px");
        $(".s2").css("width",(glb.glbwidth-100)/4*1.6+"px");
        $(".s3").css("width",(glb.glbwidth-100)/4*0.8+"px");

 

 

做一个实例，一个最简单的tbody 加滚动条

<html>
<head>
	<title>New Document</title>
	<meta name="Generator" content="EditPlus">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>

	body {padding: 100px 0 0 100px;}
	
	table {text-align:center;}

	table thead {/* 宽高*/
		width: 600px;
		display:block;
	}
	table tbody {/* 宽高 */
		width: 600px;
		height: 100px;
		display:block;
		overflow: auto;
	}
	table tbody tr td {/* 添加样式 */
		border-bottom:1px solid #000;
		width:200px;
	}
	table thead tr th {/* 添加样式 */
		border-bottom:1px solid #000;
		width:200px;
	}
	
</style>
<body>
	<!-- 表格去除空隙 -->
	<table border="0" cellpadding="0" cellspacing="0"> 
			<thead>
				<tr><th>s1</th><th>s2</th><th>s3</th></tr>
		   </thead>
			<tbody>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
			   <tr><td>s</td><td>s</td><td>s</td></tr>
		   </tbody>
	</table>
</body>  
</html>
  • 这里这些是需要必须有的样式设置
  • 效果如下

 

 

一个js写入代码 的最简单例子

<html>

<head>
	<title>New Document</title>
	<meta name="Generator" content="EditPlus">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>

	body {padding: 100px 0 0 100px;}
	
	table {text-align:center;}

	table thead {/* 宽高*/
		width: 600px;
		display:block;
	}
	table tbody {/* 宽高 */
		width: 600px;
		height: 100px;
		display:block;
		overflow: auto;
	}
	table tbody tr td {/* 添加样式 */
		border-bottom:1px solid #000;
		width:200px;
	}
	table thead tr th {/* 添加样式 */
		border-bottom:1px solid #000;
		width:200px;
	}
	
</style>
<body>
	<!-- 表格去除空隙 -->
	<table border="0" cellpadding="0" cellspacing="0"> 
			<thead></thead>
			<tbody></tbody>
	</table>
</body>  
<script>


//数据替换成自己需要用的数据
var data = [{ "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }, { "s1": "ss", "s2": "ss", "s3": "ss", "s4": "ss", "s5": "ss", "s6": "ss" }]

//直接把表头和表内全部载入
var addTableF = function (features) {
	var hthead = "";
	var htbody = "";

	hthead += '<tr>';//编写表头
	for (var j in features[0]) {
		hthead += '<th><div>' + j + '</div></th>';
	}
	hthead += '</tr>';

	for (i = 0, len = features.length; i < len; i++) {//编写表格
		htbody += '<tr>';
		for (var j in features[i]) {
			htbody += '<td><div>' + features[i][j] + '</div></td>';
		}
		htbody += '</tr>';
	}
	$("table thead").empty().html(hthead);
	$("table tbody").empty().html(htbody);
}
addTableF(data);
</script>
</html>
  • 数据只要按照上边的来就可以出现
  • [{},{}]
  • 效果

 

总结这几个例子调用时候注意的地方

  •  

  • 1.样式 需要必要性 
  • thead 宽
  • tbody 宽高 overflow,display:block
  • tr td border ,width
  • tr th border,width
  • 写了上边的这个就可以实现一个好看点的table 并body 滚动thead 不动
  • ok

 

ok

 

 

持续更新

 

 

 

 

宇神城主_蒋浩宇
关注
专栏目录
table固定头部，表格tbody可上下左右滑动
淡水无华的博客
11-03 1万+
纯css实现表头固定
用css 给tbody加垂直滚动条
热门推荐
BetterBOB的专栏
02-08 2万+
思路就是 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度 width:200px 代码如下：
可滚动的 tbody
张营的技术博客
09-28 294
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .fixed_header{ width: 400px; } .fixed_header thead { backgro
HTML常见标签——表格＜table＞标签、表格标签常见的属性、表格的跨行合并和跨列合并
最新发布
weixin_64294248的博客
07-12 3504
HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作。每个表格分为表格标题（由 标签定义），以及表格单元格（由 标签定义），表格标题和表格身体中均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题，其中标题行（）会有默认加粗的效果。
关于html中table表格tr,td的高度和宽度
weixin_34417814的博客
08-08 1790
关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题，经常遇到的一个就是会碰到表格宽度对不齐的问题。首先，来分析一下这三个标签中height和width的区别：  1、table中的width和height设置及其作用： table中设置的height其实是设置一个最小值，也就是当表...
通过css样式给表格tbody加垂直滚动条
weixin_30321709的博客
08-21 856
tbody加滚动条实现思路： 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度。 4，考虑到 tbody 产生了滚动条，这时会影响tbody以及thead的宽度，可以采用针对tbody设置::-webkit-...
用css给tbody加垂直滚动条的具体思路及样式代码
12-13
在网页设计中，有时我们需要对表格的 tbody 部分添加垂直滚动条，以便当数据过多时，用户可以轻松地浏览和查看所有信息。这里我们将详细介绍如何使用 CSS 实现这一功能，并提供相应的代码示例。 首先，理解核心思路...
table表格（表头固定，内容滚动） 由于tbody出现滚动条时候宽度比thead大 ，所以会出现表头和内容对不齐的情况，解决方法如下：
weixin_45610554的博客
08-24 4095
1.单行表头的表格 （thead标签里面直接写th标签，此时浏览器会自动在th外面加一层tr标签，所以thead里面的tr宽度减去滚动条宽度就可以了） 例： js: // 表格对齐 var tbodyH = $("#tbody").outerHeight(true); if ($("#tbody tr").outerHeight(true) * $("#tbody tr").length > tbodyH) { $("#thead tr")...
CSS设置table下tbody滚动条与thead对齐的方法
小白变不白
04-18 5969
威易网CSS教程 table tbody {     display:block;     height:195px;     overflow-y:scroll; } table thead, tbody tr {     display:table;     width:100%;     table-layout:fixed; } table thead {
html5 表格纵向滚动条,纯css实现table的表头固定tbody内容显示垂直滚动条
weixin_35937871的博客
06-03 2320
最近在做项目是经常用到table表格来做数据统计，数据少时还好，但是数据多就会导致整个页面看起来乱，用户体验不好，为了使得用户体验更好，所以就会为table的内容上显示滚动条，这样即使再多的数据也不怕因为过多导致页面显示难看。实现的方法有很多，这里列举几个比较好的整理下来，作为一个学习笔记，也为需要的小伙伴提供思路。首先要明确我们需要完成的效果：1.固定表头2.table垂直滚动条3.table列...
html设置标头往下滚动隐藏,移动端实现表头固定，tbody滚动，三种方法
weixin_42396174的博客
06-09 790
实现表头固定，tbody垂直滚动准备工作：获取页面可是区域高度function setIframeHeight() {var screenHeight = document.documentElement.clientHeight;}2.屏幕旋转触发事件window.addEventListener("resize",()=>{//正常方向或者屏幕旋转180°if(window.orient...
tbody超长显示滚动条
Knight_Key的博客
01-18 1775
头文件加样式 <style> table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1...
table滚动tbody
qq_36971710的博客
07-09 1526
table tbody { display:block; height:500px; overflow-y:scroll; -webkit-overflow-scrolling: touch; // 为了滚动顺畅 } table tbody::-webkit-scrollbar { display: none; // 隐藏滚动条 } table thead, tbody tr { display:...
js是滚动条滑到固定位置_js实现滚动条滚动到某个位置便自动定位某个tr
weixin_42524013的博客
01-14 734
要实现带滚动条的table，定位到某个tr，其实是很简单的，只有几行js代码就可以完成，具体内容如下js代码function test(){var $objTr = $("#location"); //找到要定位的地方 tr$objTr.css("background-color","lightgray"); //设置要定位地方的cssvar objTr = $objTr[0]; //转化为d...
CSS 给 table 的 tbody加滚动条
weixin_45062076的博客
04-10 609
table tbody { height: 200px; overflow-y: auto; display: block; } table thead, tbody tr { display: table; width: 100%; }
table tbody内容滚动
weixin_46544600的博客
12-09 157
【代码】table tbody内容滚动。
原生table控制tbody滚动而thead不滚动
weixin_30437847的博客
09-01 342
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>威易网CSS教程</title> <style> table tbody { d...
table trtd tbody
weixin_55799355的博客
05-24 199
<template> <div class="view-table"> <table border="1" > <tr class="tr"> <td>指标名称</td> <td>时间</td> <td>指标状态</td> <td>企业数量</td> <
table下tbody滚动条与thead对齐的方法且每一列可以不均等
05-25
要实现table下的tbody滚动条与thead对齐的效果，可以使用以下方法： 1. 将thead与tbody分开放到两个div中，一个div用于显示thead，另一个div用于显示tbody，这两个div都设置为相同的宽度。 2. 对于tbody所在的div...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值