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 = ElementById("sampleTable");
var rows = ws.length;
var div = ElementById("test");
if (rows>6)
{
if (div.style.overflow=="scroll")
div.style.overflow="hidden";
else
div.style.overflow="scroll";
}
}
//⿏标移动到⽂本上时产⽣⽓泡效果
function addTitle()
{
var table = ElementById("sampleTable");
var rows = ws.length;
for(var i=0; i<rows;i++)
{
for(var j=0;j&ws[i].cells.length;j++)
{
}
}
}
</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>表格中
css表格样式内容超出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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论