JS+CSS实现Table样式变化

最新推荐文章于 2023-06-13 11:36:08 发布
最新推荐文章于 2023-06-13 11:36:08 发布
阅读量1k 收藏
点赞数
分类专栏： jsp 文章标签： css ie html javascript ViewUI
本例实现的功能如下：
1.表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。
2.表格中内容超出div范围后处理。
3.表格的表头不随滚动条滚动处理。

代码如下： 

<%@ page language="java"  pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>表格样例</title>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
	//点击更多时产生滚动条效果
	function showCroll()
	{
		var table = document.getElementById("sampleTable");
		var rows = table.rows.length;
		var div = document.getElementById("test");
		if (rows>6)
		{
			if (div.style.overflow=="scroll")
				div.style.overflow="hidden";
			else
				div.style.overflow="scroll";
		}
	}
	//鼠标移动到文本上时产生气泡效果
	function addTitle()
	{
		var table = document.getElementById("sampleTable");
		var rows = table.rows.length;
		for(var i=0; i<rows;i++)
		{
			for(var j=0;j<table.rows[i].cells.length;j++)
			{
				table.rows[i].cells[j].title = table.rows[i].cells[j].innerText;
			}
		}
	}
	window.onload = addTitle;
	</script>
	<style type="text/css">
		.sampleTable{border-collapse:collapse;width:100%;table-layout:fixed;}
		.sampleTable tr{height:25px;}
		.sampleTable td{border:none;word-keep:keep-all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
	</style>
  </head>

  <body>
    <h4>1.表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</h4>
	<h4>2.表格中内容超出div范围后处理。</h4>
	<h4>3.表格的表头不随滚动条滚动处理。</h4>
	[align=left]表格样例</th>
					<th align="right">[url=#]更多[/url]</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
				<tr>
					<td>表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。</td>
					<td>表格中内容超出div范围后处理。</td>
					<td>表格的表头不随滚动条滚动处理。</td>
				</tr>
			</tbody>
		</table>
	[/align]
  </body>
</html>

iteye_16052
关注
专栏目录
js实现漂亮的table表格
07-26
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
table的js样式
Amos318的专栏
11-13 1883
今天不忙，总结点东东供大家参考： /**  * @param 无边框，隔行换色  * @see 调用方法：在title中引入js文件，在表格后执行函数  * @paraneter rowStart & colStart默认值为0  */ function changeColorEachRow(tableID, rowStart, colStart){     var tabTable
JS操作表格样式汇总
崔向阳@李晓的博客
09-19 1734
在HTML界面开发中，经常会遇见JS对TABLE表格的操作，下面针对几种经常性的操作进行汇总： 第一：JS动态增加表格行数据 在body中定义一个空的Table <div id="detail" class="sub-title4" align="left"> <table id="tb_cxy"> </ta...
简单漂亮的表格样式
06-12
自制的，比较漂亮的表格样式，不算华丽，自我觉得可以
利用js+css+html实现固定table的列头不动
11-26
总结来说，实现固定table列头不动的技术主要涉及到CSS的绝对定位、JavaScript的事件监听和DOM操作。通过JavaScript动态调整固定表头的宽度和位置，以及CSS使其在滚动时始终保持可见，从而达到预期效果。这个方法不仅...
利用JS+CSS实现滚动表格数据展示
06-06
下面将详细介绍如何通过JavaScript（JS）和层叠样式表（CSS）来实现这一功能。 首先，我们需要创建一个基本的HTML结构，包含一个`<table>`元素，用于展示数据。表格通常由`<thead>`（表头）、`<tbody>`（表格主体）...
HTML+CSS+ajax+php+mysql实现登录
09-30
在`css`文件夹中的样式表文件，如`style.css`，通常包含对字体、颜色、布局等的定义，使得登录页面更具视觉吸引力。 3. **Ajax**：AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下更新部分...
JS+CSS实现的蓝色table选项卡效果
10-23
本文介绍了使用JavaScript和CSS来实现一种蓝色table样式选项卡效果。选项卡效果被广泛用于网页设计中，用以区分不同的内容区域，并允许用户通过点击切换不同的标签来查看不同的内容，而不必加载新的页面。这种效果...
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
10-24
本文将探讨如何使用HTML、CSS和JavaScript来实现一个兼容各大浏览器的表格固定列解决方案。 首先，HTML部分主要负责创建表格的基本结构。我们需要一个包含标题和主体的表格，以及一个用于横向滚动的外层容器。以下...
JS自定义的漂漂亮样式的Table
06-22
自定义的table样式 隔行换色，鼠标悬停变色 ，点击 变色
自己做的一个基于javascript和css的table表格模板，非常漂亮
11-23
自己做的一个基于javascript和css的table表格模板，非常漂亮,直接拿过来用就可以了
JS实现的样式切换功能tableCSS实例
11-29
本文实例分析了JS实现的样式切换功能tableCSS。分享给大家供大家参考，具体如下： 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果 代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { return ;} //参数及默认参数 var options = { ta
js写table，关键是里面用js加样式
在路上
12-15 640
&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
js css 操作的table各种效果 第一篇
清风拂过
08-30 351
1,用table做的镜框效果   &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;title&gt;标题页&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table border=15 style=border-style:ridge
js 动态 指定 table 各行样式
加利敦张大师的专栏
03-29 2047
1.  写好样式  这里指定了2个颜色  tr .BgColor{ background-color:#FF0; } tr .BgColor1{ background-color:#ffffff; } 2. 写 js window.onload=function(){    // 定义一个页面加载事件 var rows=document.getElementById('r
JS拼table调整表格样式
最新发布
lzq_20120119的博客
06-13 425
JS拼写表格TABLE，改变样式。
js css 操作的table各种效果 第二篇
清风拂过
08-30 131
11，动态改变表格的行顺序 &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;title&gt;无标题页&lt;/title&gt; &lt;script language="javascript"&gt; var beginMoving=false; //判断是否移动的标识-移动开
js table学习笔记
某风吾起的博客
05-25 7073
文章目录一、tabletable 编写格式table 的css 样式1.border表格边框：table border列边框：td boader表头边框：th bordercollapse 折叠 去表格项之间的空白bordr总结：2.padding 内边距3. 表格字体居中 text-align: center;4. 表格居中 margin: auto;5. 列扩展 colspantable的作业1. 表格界面的制作 一、table <table border="1" cellspacing
jQuery+JS+CSS实现可编辑表格教程及实战示例
本文将详细介绍如何使用jQuery、JavaScript和CSS实现一个可编辑的表格实例。首先，我们通过HTML结构构建表格，包括`<html>`、`<head>`、`<title>`、`<meta>`标签以及引用CSS和jQuery库的`<link>`和`<script>`元素。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值