JS+CSS实现Table样式变化

本例实现的功能如下:
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,html,css,IE)