<html>
<head>
<SCRIPT type=text/javascript src="../../jquery/jquery-2.0.1.min.js"></SCRIPT>
<style type="text/css">
/*所有内容都在这个DIV内*/
div.all {
border: 1px solid #4BB3E2;
width: 100%; /*这个宽度可根据实际需要改变*/
clear: right;
}
/*表头在这个DIV内*/
div.title {
width: 100%;
background-color: #4BB3E2;
}
/*内容在这个DIV内*/
div.content {
width: 100%;
overflow: scroll; /*总是显示滚动条*/
overflow-x: hidden; /*去掉横向滚动条*/
height: 200px;
}
div.title_left {
float: left;
margin-right: 17px;
}
div.content_left {
float: left;
}
.main_table {
width: 100%;
border: 1px solid #4BB3E2;
border-collapse: collapse; /*边线与旁边的合并*/
table-layout:fixed;
}
.main_table tr th {
border: 1px solid #4BB3E2;
background-color: #4BB3E2;
font-size:14px; line-height:35px; background:#4BB3E2; border:solid 1px #BEE5F9;
overflow: hidden; /*超出长度的内容不显示*/
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all; /*字内断开*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/
white-space: nowrap;
}
/*单元格样式*/
.main_table tr td {
border: 1px solid #4BB3E2;
overflow: hidden;
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
</style>
</head>
<body>
<div class="all">
<div class="title">
<div class="title_left">
<table class="main_table">
<tr>
<th>姓名</th><th style="width:30%">年龄</th><th>性别</th><th>班级</th>
</tr>
</table>
</div>
</div>
<div class="content">
<div class="content_left">
<table class="main_table" id="taskInfo_tbId">
<tr>
<td>aaaaaaaaaaaaaa</td><td style="width:30%">aaaaaaaaaaaaa</td><td>cccccccccccc</td><td>bbbbbbbbbbbbbbbbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function setDataTbMovecss(tbid){
var objTmp = '';
$("#"+tbid+" tr").mouseover(function(){ //鼠标移动的高亮显示
$(this).css("background", "#BEE5F9");
}).mouseout(function(){
if('' != objTmp){//表示有点击
if(objTmp != this){
$(this).css("background", "#FFFFFF");
}
}else{
$(this).css("background", "#FFFFFF");
}
}).click(
function(){
if(objTmp != this){
objTmp = this;
$("#"+tbid+" tr").each(function(){
$(this).css("background", "#FFFFFF");
});
}
$(this).css("background", "#BEE5F9");
}
);
}
setDataTbMovecss("taskInfo_tbId");
</script>
</body>
</html>
分享到：
相关推荐
虽然niceScroll插件很好用，毕竟它不依赖css,只是单纯的js就可以设置出好看的滚动条了。 最近在项目中使用到niceScroll，而且在表格里有横滚动条，竖滚动条时很容易错位，就是滚动条会悬浮在半空，并不是在div的底部...
jquery+bootstrap 控制table中的th在浏览器滚动条滚动时,一直显示在tbody的上方 这只是一个页面的content部分,header & footer并未添加 1.实际页面中,需要加上header的高度; 2.通过offset()获取th这一行所处的位置,...
设置滚动条.html 设置滚动条。 框架实例手把手.html 演示框架实例手把手。 第10章（源代码\第10章） 示例描述：本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向....
默认的100%宽要实现改变窗口大小也100%的话，在table元素上添加width=”100%”,至于css的100%为什么不生效，原因未知。 下面就说说设置如何给datatables设置固定的宽度。 1、html代码 <table id=userTable class=...
jQuery详细教程，讲解很透彻， 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数，隐藏 id="test" 的元素。 $("p").hide() ...
修复了主页面出现多个滚动条的问题； 修复了已知的各种浏览器兼容问题； 修复了layphoto和suggest等页面的显示问题； 新增Glyphicons字体图标的预览； 新增对不支持的浏览器的友好提示； 新增视频/音乐播放器的支持...
util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...
此时此景，笔者只专注Android、Iphone等移动平台开发，看着这些源码心中有万分感慨，写此文章纪念那时那景！ Java 源码包 Applet钢琴模拟程序java源码 2个目标文件，提供基本的音乐编辑功能。编辑音乐软件的朋友，这...