用table实现收缩栏功能

最新推荐文章于 2024-10-29 20:01:51 发布
最新推荐文章于 2024-10-29 20:01:51 发布
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 网页编程 文章标签： table class border menu stylesheet function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fengloveyun/article/details/1612044
本文详细介绍了使用HTML和CSS进行网页布局的方法，包括如何设置页面结构、样式表链接及导航栏的设计等。通过具体实例展示了不同元素的定位技巧以及交互效果实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css/top.css" _fcksavedurl=""css/top.css"" rel="stylesheet" />
<link href="css/Tree.css" rel="stylesheet" />
<style type="text/css">
<!--
#row {
 position:absolute;
 left:178px;
 top:390px;
 width:10px;
 height:8px;
 z-index:1;
}
-->
</style>
<STYLE type=text/css>.navPoint {
 FONT-SIZE: 6pt; CURSOR: hand; COLOR: black; FONT-FAMILY: Webdings
}
</STYLE>
<SCRIPT language=javascript>
function switchSysBarLeft()
{
 
 if (switchPointLeft.title=="关闭菜单"){
  switchPointLeft.title="打开菜单"
  document.all("MenuLeft").style.display="none"
  
 }
 else{
  switchPointLeft.title="关闭菜单"
  document.all("MenuLeft").style.display=""
 }
}


function openMenu()
{
 return;
}

  </SCRIPT>
</head>

<body leftmargin="0" topmargin="0">

<TABLE id=Table1 cellSpacing=0 cellPadding=0 width="100%" align=center
  border=0><TBODY>
  <TR>
    <TD width=174>
      <TABLE id=Table2 height=93 cellSpacing=0 cellPadding=0 width="100%"
      border=0>
        <TBODY>
        <TR>
          <TD width=9><IMG height=93 alt=""
            src="imags/top01.gif" width=9></TD>
          <TD background=imags/top02.gif><IMG height=93
            src="imags/logo.gif" width=155></TD>
          <TD width=10><IMG height=93 alt=""
            src="imags/top03.gif" width=10></TD>
        </TR></TBODY></TABLE></TD>
    <TD width="100%">
      <TABLE id=Table3 cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD vAlign=bottom width="100%" height=56>
            <TABLE id=Table4 cellSpacing=0 cellPadding=0 width="100%"
              border=0><TBODY>
              <TR>
                <TD width=12><IMG height=56 alt=""
                  src="imags/top04.gif" width=12></TD>
                <TD align=center background=imags/top05.gif><IMG
                  height=56 src="imags/MainTitle_Logo.gif" width=500></TD>
                <TD width=18><IMG height=56 alt=""
                  src="imags/top06.gif"
            width=18></TD>
              </TR></TBODY></TABLE></TD></TR>
        <TR>
          <TD height=37>
            <TABLE id=Table5 height=37 cellSpacing=0 cellPadding=0 width="100%"
            border=0>
              <TBODY>
              <TR>
                <TD class=main_title background=imags/top07.gif><table id="BusiPortalTable" style="BORDER-COLLAPSE: collapse"
                  cellspacing="0" cellpadding="0" border="0">
                  <tbody>
                    <tr style="HEIGHT: 20px" align=center>
                      <td class="main_title" style="width: 61px"><div align="left"><a href="/jjjhtzglxt.htm" class="menu_main">&nbsp;我的首页</a></div></td>
                      <td class="menu_line" style="WIDTH: 1px">&nbsp;</td>
                      <td class="main_title">&nbsp;<a 
                        href="http://www.hao123.com" target="FrameBottom" class="menu_main">权限维护</a></td>
                      <td class="menu_line" style="WIDTH: 1px">&nbsp;</td>
                      <td class="main_title">&nbsp;<a class="menu_main" 
                        href="#">系统维护</a></td>
                      <td class="menu_line" style="WIDTH: 1px">&nbsp;</td>
                      <td class="main_title">&nbsp;<a class="menu_main" 
                        href="#">文件查询</a></td>
                      <td class="menu_line" style="WIDTH: 1px">&nbsp;</td>
                      <td class="main_title">&nbsp;<a class="menu_main"
                        href="#">投资查询</a></td>
                      <td class="main_title">&nbsp;<a class="menu_main"
                        href="#">统计分析</a></td>
                      <td class="main_title">&nbsp;<a class="menu_main"
                          href="#">帮助</a></td>
                      <td class="main_title">&nbsp;<a class="menu_main"
                         href="#">退出</a></td>
                    </tr>
                  </tbody>
                </table></TD>
                <TD width=18><IMG height=37 alt=""
                  src="imags/top08.gif"
            width=18></TD>
              </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<TABLE id=Table7 height=35 cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
  <TBODY>
  <TR>
    <TD align=center background=imags/office_ToolBar_Bg.gif>&nbsp;</TD>
  </TR>
 </TBODY></TABLE>
<table width="100%" height="472" border="0" cellpadding="0" cellspacing="0">
  <tr >
    <td width="18%" rowspan="3" bgcolor="#E8F5FD" id="MenuLeft">&nbsp;</td>
    <td width="1%"  background="imags/Line.gif" onmouseover="openMenu()"><table width="10" height="196" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="58">&nbsp;</td>
      </tr>
      <tr>
        <TD  vAlign=middle onclick=switchSysBarLeft(); onmousemove=openmenu()  id=switchPointLeft title=关闭菜单 class="navPoint" >    <div align="center"><img src="imags/row.gif" /></div></TD>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td width="81%" rowspan="3" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
 
</table>
</body>
</html>
 

html table 收缩,HTML中构建自动伸缩的表格Table
weixin_34447182的博客
06-10 632
【引子】在开发的过程中，表格Table有个缺陷，如果一行中某个单元格的超过一行，表格就不够美观了。下面的代码解决了这个问题：当表格被载入的时候，TD的宽度是原定的长度，不会撑开TD，也不会影响其他TD，点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高。用户体验很好。【优点】1、对开发人员指定的表格没有任何影响；2、使用简单；3、被定义的表格样式可以随意的定制你的样式，不对你的样式构成影...
VUE+ElementUI 实现 el-table树形结构的全部展开和全部收回功能
小张写bug的博客
05-13 9160
目录标题背景实现思路 背景 ElementUI官方提供了el-table的树形结构展示方式。 通常使用树形结构时，会需要“全部展开”和“全部收回”的按钮功能，便于我们能够方便对数据表格的操作。比如下图的实现效果： 实现思路 官方文档中给出了表格级别的方法，在Table Methods中，可以找到 toggleRowExpansion 方法，其具体含义参见官网释义。 该方法可以实现表格中某一行的展开或者收缩功能，那么我们就借用此方法来实现所有行的功能，也是非常简单的了。 废话不多说，直接上代码： //先是两
HTML 自动伸缩的表格Table js实现
10-30
在开发的过程中，表格Table有个缺陷，如果一行中某个单元格的超过一行，表格就不够美观了。
简单的table收缩（一）
cnsummerLi
11-28 560
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>hhh</title> <style type="...
简单的table收缩（二）laytpl.js+Jquery+原生Js实现
cnsummerLi
11-28 307
1、准备所需的js 1.1数据js datas={ "code": 1000, "data": { "total": { "fund": [ { "name": "小李", "flag": 0, ...
表格展开与收缩
ITdada的专栏
05-15 1062
Insert title here              thead{             background-color:#cccccc;         }         .p{             background-color:#FFE7BA;         }                  .selected{             back
layui侧边收缩菜单
02-02
这些菜单项可以是链接、按钮或者其他自定义元素，关键在于它们需要绑定对应的layui事件来实现收缩和展开的功能。 例如，我们可以这样设置HTML结构： ```html <!-- 这里放置菜单项 --> ``` 接下来，...
实现类似ExtJS的拖动功能以改变表格大小
在现代前端开发中，实现表格（table）的动态调整大小功能是一个常见的需求。这不仅提高了用户界面的可用性，还增强了用户的交互体验。根据文件所提供的信息，我们可以得出，这里主要涉及两个方面的知识点：一是表格...
el-table实现列折叠
最新发布
03-26
好的，我现在需要帮助用户解决关于el-table实现列折叠功能的问题。首先，用户提到他们参考了站内的两篇引用，其中一个是关于行展开与收缩的10行代码示例，另一个是关于懒加载的实现思路。用户现在想实现列折叠，也...
表格中操作栏悬浮实现
weixin_42369612的博客
03-25 938
表格中操作栏悬浮实现 产品提出的需求: 因为一个表格中的字段比较多,会出现滚动条,然后操作栏都在最后一栏,所以用户使用起来会有不便 希望能够是操作栏悬浮,然后当滚动条滚到最后的时候,又不悬浮 这就很操蛋,之前做banner 的悬浮可以直接用fixed,根据视口去进行固定悬浮 但是这个是根据表格进行固定悬浮 而且一会悬浮,一会又不悬浮 解决方案: 使用 position:sticky属性实现 1.先写出悬浮的样式类 .th-sticky{ position: sti
jQuery基于Bootstrap.js表格行展开收缩隐藏代码.zip
11-01
这是一款相当实用的jQuery基于Bootstrap.js表格行展开收缩隐藏代码，用来显示隐藏表格行内容，点击后箭头指向也会改变。
收缩式导航菜单(CSS+DIV)
10-16
很好用的收缩式导航菜单(CSS+DIV)
jQuery实现table表格信息的展开和缩小功能示例
01-21
本文实例讲述了jQuery实现table表格信息的展开和缩小功能。分享给大家供大家参考，具体如下： <%@ page language=javaimport=java.util.*pageEncoding=UTF-8%> <% String path = request.getContextPath(); String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/; %> <!DOCTYPE HTML PUBLIC -//W3C/
jquery实现table表展开和收缩
热门推荐
fumier的专栏
01-20 1万+
jquery实现table表展开和收缩
html 利用jquery表格可以收缩展开的样式
No_bug_is_possible的博客
04-13 7164
先看下效果废话不多说 直接上代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-s
table组件—可伸缩列
雷雨天的雷胖子
12-09 1553
目录 一、概述 二、详解 三、拓展 一、概述 ant design vue框架中，table组件本身不具备列拖拽功能，若想实现列拖动调整列宽的功能，需要引用vue-draggable-resizable插件。 二、详解 第一步：安装vue-draggable-resizable插件 vue-draggable-resizable插件推荐安装2.1.0版本，最新的2.2.0版本存在问题。 > npm install vue-draggable-resizable@2.1.0
jquery最佳实现展开收缩table多个列
阳水平的博客
03-03 1619
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Show and Hide Columns in a Table</title> <link href="CSS/table.css" rel="stylesheet" ...
10行代码，实现 el-table 表格行的展开与收缩
tacity的博客
10-29 1522
4、这时我在想如果能实现展开，就证明路没问题了，但没法关闭，是因为表格没有再次渲染，想实现表格的再次渲染其实很简单，只要表格内的数据变化就行了，于是创造了一个变量const tableKey = ref(0)，每次点击后都实现+1 的效果，tableKey.value++;3、这时候我神奇的发现，文字可以点击了，也可以展开下面的行了，但是再次点击却无法关闭，我觉得这是el-table的一个bug，其实本可以这么简单就实现点击的，但是官方文档却给了几个语焉不详的变量，实在不知道是为什么。
html表格内容的展开和收缩,elementui table中树形数据实现全部展开和全部收起
weixin_29269441的博客
05-31 2066
如图：(外部按钮控制table树形数据全部展开和收起)1608112386(1).png上代码：收缩分类contraction(val) {if(this.showStyle){this.showStyle = falseif(this.tableData.length !=0){const elsopen = this.$el.getElementsByClassName('el-table__...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值