tbody的另一妙用实例

最新推荐文章于 2020-12-20 20:19:28 发布
最新推荐文章于 2020-12-20 20:19:28 发布
阅读量1.5k 收藏
点赞数
分类专栏： asp/javascript/xml 文章标签： class javascript border table function c

一、建立样式。该实例中使用样式为：
body,table,tr,td{font-size:12px;color:#000000;}
.sec1 {background-color: #99CC99;cursor: hand;color: #000000;border-left: 1px solid #FFFFFF;border-top: 1px solid #FFFFFF;border-right: 1px solid gray;border-bottom: 1px solid #FFFFFF}
.sec2 {background-color: #D4D0C8;cursor: hand;color: #000000;border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray;font-weight: bold; }
.main_tab {background-color: #D4D0C8;color: #000000;border-left:1px solid #FFFFFF;border-right: 1px solid gray;border-bottom: 1px solid gray;}

　　二、插入Javascript代码：（在<head>中）
<script language="JavaScript">
<!--
function secBoard(n,x,y)
{
for(i=0;i<secTable.cells.length;i++){
secTable.cells[i].className="sec1";
secTable.cells[n].className="sec2";}
for(i=0;i<mainTable.tBodies.length;i++){
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="block";}
weizi.innerHTML="<b>"+x.toUpperCase()+"</b>展馆<b>"+y+"</b>楼展厅";
}
//-->
</script>

　　三、建立“导航”表格：
<table border=0 cellspacing=0 cellpadding=0 width=578 id=secTable>
<tr height=20 align=center>
<td class=sec2 width=10% onClick="secBoard(0,'a','1')">A展馆1楼展厅</td>
<td class=sec1 width=10% onClick="secBoard(1,'a','2')">A展馆2楼展厅</td>
<td class=sec1 width=10% onClick="secBoard(2,'b','1')">B展馆1楼展厅</td>
<td class=sec1 width=10% onClick="secBoard(3,'b','2')">B展馆2楼展厅</td>
<td class=sec1 width=10% onClick="secBoard(4,'c','1')">C展馆1楼展厅</td>
<td class=sec1 width=10% onClick="secBoard(5,'c','2')">C展馆2楼展厅</td>
</tr>
</table>

　　四、使用<tbody>建立效果：
<table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab>
<tbody style="display:block;">
<tr>
<td align="center"><br>
一<br>
</td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align="center"><br>
二<br>
</td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align="center"><br>
三<br>
</td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align="center"><br>
四<br>
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center"><br>
五<br>
</td>
</tr>
</tbody><tbody style="display:none;">
<tr>
<td align="center"><br>
六<br>
</td>
</tr>
</tbody>
</table>

　　制作完成，请参看效果！


                                                                                                                                       作者：田耕 　摘自：蓝色理想

RAINMAN_NET
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap的table表头固定tbody滚动的实例代码
09-01
总结来说，这个实例为我们提供了一种实现Bootstrap表格固定表头滚动tbody的方法，这对于处理大量数据的表格是一个实用的解决方案。通过理解这个例子，我们可以更好地掌握Bootstrap的定制能力和JavaScript的动态调整...
前端-基础 表格标签 - 表格结构标签 （ ＜thead＞ ＜tbody＞）
最新发布
三毛与海子的博客
01-18 1104
表格标签的大体结构
CSS 实现 table 表头固定 tbody 显示垂直滚动条并自定义滚动条样式
zhang33565417的博客
05-10 3673
一、最终效果图 二、关键代码 html 代码： <div class="table_info"> <table border="0" cellspacing="0" cellpadding="0" style="width: 100%;"> <thead> <tr> <th>项目账号</th> <th>项目名称</th> ...
CSS 设置table中tbody的自定义滚动条
grootbaby
08-28 1127
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;CSS教程&lt;/title&gt; &lt;style&gt; /* 自定
浏谷歌览器对<tbody>标签的css样式解释
cchengxu的专栏
07-11 752
近日做项目发现,当对应用样式的时候谷歌歌览器对样式的解释与火狐和ie不大相同: 谷歌歌览器会将它的样式同样应用到它的中,而fireFox和IE则只将样式应用给自己; 例子,对于如下样式 tbody{     background: url("list_border-x.png") repeat-x scroll 0 top; } 上图为谷歌效果
table中的tbody标签
weixin_30924239的博客
12-20 532
table中的tbody标签 写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的，每个页面都有head ,body两部分，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。thead用来放标题之类的东西tbody放数据本...
tbody标签的妙用 加速表格内容显示
09-28
用TBODY这个标签可以控制表格分行下载，可以让其中的内容比网页中别的东东（如图片）先下载下来，这样可以让别人先看到网页的实质性的内容，不用等那么久了
用js删除tbody的代码
01-19
runcode 123 123 123 123 123 123 123 123 123 123 ...删除表格的第一个tbody（这个表格只有俩tbody，所以这个按钮只能按两次……） [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
thead,tbody,tfoot
xiaolvzi的专栏
08-27 860
写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的，每个页面都有head ,body两部分，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。 thead用来放标题之类的东西 tbody放数据本体 tfoot放表格的脚注之类…… 标签使用其本
table -thead固定，tbody滚动的样式
qd_xbL的博客
09-11 187
table tbody { display: block; height: auto; max-height: 380px; overflow-y: scroll; } table thead, tbody tr { display: table; width: 100%; table-layout: fixed; } /* table thead { width: calc(100% - 1em) } */ /* 隐藏滚动条 */ tbody::-webkit-scrollbar { display: n
表格表头thead固定，tbody滚动实现样式
lml_little的博客
06-10 2723
设置样式如下 .table-scrollthead{ display:table; width:calc( 100% - 4px );table-layout:fixed; } .table-scrolltbody{ max-height:6rem; overflow-y:auto; display:block; wid...
让原生table的tbody达到一定的高度显示滚动条，并修改滚动条的默认样式
weixin_45899022的博客
08-27 1378
效果图： HTML： <table class="coupon-table" cellspacing="0"> <thead class="coupon-thead"> <tr> <th>券种类</th> <th>优惠券链接</th> <th>券消费限额</th> <th&g
2 HTML中的body和它的默认样式
weixin_34320724的博客
05-25 2592
大家好，我是小遁。 body有默认的margin值 在上节课的代码中加入<div>Hello World</div> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
c# 添加body样式_CSS_用css给tbody加垂直滚动条的具体思路及样式代码，思路就是 1，把tbody设置成displa - phpStudy...
weixin_39975810的博客
12-20 162
用css给tbody加垂直滚动条的具体思路及样式代码思路就是1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。2，把thead的tr设置成display:block。3，因为都设置成block所以要给td手动添加宽度 width:200px代码如下：复制代码代码如下:IdNameCategoryMonthAmounthasBackUps...
table和tr设置样式
热门推荐
......
02-15 3万+
table和tr设置样式，和平常的style和class有些许差别。 1、table 样式设置方法有: (1) (2) 这样的设置的cellspacing，宽度是(1)方法中的2倍宽 (3)css: .table{width:400px;height:300px;background-color:green;border:0;cellspacing:1px;} 这样的设置的cellspac
通过css样式给表格tbody加垂直滚动条
weixin_30321709的博客
08-21 847
tbody加滚动条实现思路： 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度。 4，考虑到 tbody 产生了滚动条，这时会影响tbody以及thead的宽度，可以采用针对tbody设置::-webkit-...
前端学习（205）:animation动画库
歌谣的博客
12-24 414
动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
html tbody接收数据,html tbody标签怎么用
06-06
可以在`<table>`标签中使用`<tbody>`标签来创建多个表格行组，并且可以在每个`<tbody>`标签中添加任意数量的表格行`<tr>`，以便更好地组织表格的内容。 要向`<tbody>`标签中添加数据，可以使用JavaScript或其他编程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值