本例实现的功能如下：
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>
分享到：
相关推荐
下面将详细介绍如何通过JavaScript（JS）和层叠样式表（CSS）来实现这一功能。 首先，我们需要创建一个基本的HTML结构，包含一个`<table>`元素，用于展示数据。表格通常由`<thead>`（表头）、`<tbody>`（表格主体）...
最后，压缩包中的“表格变色”可能是指一个示例，演示了如何通过JavaScript和CSS实现单元格颜色随数据变化的功能。这通常涉及到数据驱动的CSS类切换，例如，当单元格值达到特定条件时，JavaScript会添加一个预定义的...
在`css`文件夹中的样式表文件，如`style.css`，通常包含对字体、颜色、布局等的定义，使得登录页面更具视觉吸引力。 3. **Ajax**：AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下更新部分...
"JS+CSS的table表格特效"是一个利用JavaScript（JS）和层叠样式表（CSS）来增强HTML表格功能的例子，旨在提高用户体验并增加交互性。在这个项目中，我们可以看到几个关键的技术点： 1. **复选框全选**：这是表格中...
本项目标题为“魔法卡片中复古可移动公告框(js+css+table)”，它旨在利用JavaScript、CSS以及HTML表格来模拟QQ魔法卡片中的公告功能。以下是对这个项目的详细解析： 首先，我们要理解JavaScript（js）在这个项目中...
通过使用CSS选择器，我们可以精确地定位到页面上的某个或某些元素，并赋予它们特定的样式，从而实现定制化的视觉效果。 表格（`table`）在网页设计中主要用于展示结构化数据，如数据表、日历等。虽然现代网页设计更...
在网页设计中，表格（Table）常用于数据展示，而CSS（层叠样式表）和JavaScript（JS）则能为表格增添动态效果和用户交互性。 **CSS（层叠样式表）**在网页设计中起到美化和布局的作用。对于表格，CSS可以用来改变...
在网页设计中，为了提升...综上所述，通过CSS和JavaScript的结合，我们可以轻松实现table隔行变色的效果，无论是静态页面还是动态内容，都能提供良好的阅读体验。在实际开发中，可以根据项目需求灵活选择合适的方法。
在本文中，我们将深入探讨如何使用JavaScript、CSS、DIV和HTML Table来实现C#中DataGridView控件的功能，尤其是实现单元格的动态编辑。在.NET框架下，DataGridView是用于展示和编辑数据的强大控件，但在Web环境中，...
4. `table.html`：可能展示了如何使用CSS美化HTML表格，包括单元格、行和列的样式，以及响应式布局处理。 5. `notes.html`：这可能是一个笔记或者信息页，展示了如何使用和CSS创建一种特别的布局或界面设计。 6. `...
在网页开发中，HTML、CSS和JavaScript是三个关键的组成部分，它们共同构建了网页的结构、样式和交互性。在本项目"html+css+js表格动态增删改与xml加载与保存"中，我们将深入探讨如何利用这些技术实现一个功能丰富的...
"韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记" 本资源主要讲解了 DIV+CSS 的概念和应用， DIV 是 HTML 文档中用来提供结构和背景的元素，而 CSS 是一种用来表现 HTML 或 XML 等文件式样的...
3. JavaScript: JavaScript是一种客户端脚本语言，用于实现交互性和动态效果。在这个项目中，JavaScript可能被用来实现用户交互，如电影筛选、播放控制、表单验证等。可能使用了jQuery库简化DOM操作，或者Vue、React...
此模板中提到的“有图”可能指的是包含各种图表，如柱状图、饼图、线图等，这些图表通常使用JavaScript库（如Chart.js或Highcharts）结合HTML和CSS实现，用于数据可视化，便于后台管理人员理解并分析数据。...
这个项目使用了JavaScript（可能是jQuery或者其他JS库）和CSS来创建一个功能类似于文本编辑器中的表格。以下是对这个实现的一些关键知识点的详细解释： 1. **HTML Table元素**：HTML的`<table>`元素用于创建表格，...
本项目使用HTML、JavaScript（JS）和CSS这三种技术实现了一个网页版的扫雷游戏。下面我们将详细探讨这三个方面的知识。 **HTML（超文本标记语言）** HTML是网页的基础结构，负责定义页面的布局和内容。在这个扫雷...
本文将详细介绍如何通过结合JavaScript（JS）和层叠样式表（CSS）来创建一种能够提升用户体验的网页表单特效。此方法适用于前端开发人员进行深入研究，旨在通过优化用户交互体验来提高表单填写效率和准确性。 #### ...
总结起来，结合CSS2和JavaScript可以轻松地为表格实现隔行变色的效果。在CSS中，我们利用`:nth-child()`伪类选择器或者自定义类来定义行的样式；在JavaScript中，我们通过DOM操作动态地添加或移除这些样式类，确保...
2. **鼠标滑过特效**：为了增加网页的交互性，可以通过CSS或JavaScript实现鼠标滑过时的特效，比如改变字体颜色、背景颜色或者显示隐藏元素等。这部分内容要求学生掌握CSS伪类选择器（如`:hover`）的用法，以及简单...
本资料无任何框架，有mysql数据库，配置运行即可！ 文件包含ajaxpg.php,ajax.js,page.css,...动态数据显示在table里，有loading效果，page有css样式，可自定义样式，内有注释，大家稍稍修改可添加在个人网页系统中！！