html+css 做成一个可浏览的表格

现在表格内容需要显示的要求如下:

1, 表格很大,界面放不小,需要放到div中。

2, 在div中可以用scroll滑动查看。

3, td中的内容保持在一行中。

4, 可以点击tr,然后可以选中并了解点击了哪行。

html:

<div id="div1">

  <table id="table1">

    <tr></tr>

  </table>

<div>

css:

//div宽度要小于table就有scroll了。
#table1 {border-collapse:collapse;height:100;}
#table1 table ,th, td {border: 1px solid black;}
#table1 td{
width:230px;  /*宽度根据需要设置,也可以设置百分比*/
height:25px;line-height:25px;  /*高度也是根据需要设置*/
white-space:nowrap;  /*文本显示不自动换行*/
/*overflow:hidden;*/  /*超出部分显示*/
}
#div1 {border: 1px solid red;width:460; height:180px;overflow:scroll;}

js:

给点击增加一个onmousedown事件处理。
var trs = document.getElementById(‘table1‘).getElementsByTagName(‘tr‘);
var choose;  
window.onload = function(){  
 for( var i=0; i<trs.length; i++ ){  
  trs[i].onmousedown = function(){  
   tronmousedown(this);
  }  
 }  
}
function tronmousedown(obj){  
 for( var o=1; o<trs.length; o++ ){  
  if( trs[o] == obj ){  
   trs[o].style.backgroundColor = ‘lightblue‘;
   choose = o;
  }  
  else{  
   trs[o].style.backgroundColor = ‘‘;  
  }  
 }  
}

可以一起交流。

时间: 2024-08-30 10:12:05

html+css 做成一个可浏览的表格的相关文章

【javascript/css】Javascript+Css实现图片滑动浏览效果

今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <script type="text/javascrip

放弃antd table,基于React手写一个虚拟滚动的表格

缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升. 客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一条街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任. 不过,antd虽好,但一些组件在某一些场景下,是很不适用的.例如,以表格形式无限滚动地展示大量数据(1w+)时,

CSS实现一个粒子动效的按钮

原文链接 github.com/XboxYan/not… 按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 通常这类效果第一反应可能就是借助canvas了,比如下面这个案例 效果就更加震撼了,当然canvas实现也有一定的门槛,而且实际使用起来也略微麻烦(所有js实现的通病),这里尝试一下CSS的实现方式. 生成粒子 抛开js方案,还有HTML和CSS实现方式.HTML就不用说了,直接写上大量的标签 <button>

用css实现一个空心圆,并始终放置在浏览器窗口左下角

用css实现一个空心圆,并始终放置在浏览器窗口左下角         div{                 position:fixed;                 bottom:0;                 left:0;                 width:100px;                 height:100px;                 border:2px solid #000;                 border-radius:

使用android的mediaplayer做成 一个demo,欢迎测试使用

附件是为一个定制视频产品而简单的写了一个demo,用来说明android的mediaplayer是如何使用的. http://files.cnblogs.com/guobaPlayer/palyerDemo3D.apk 欢迎下载测试. 完全采用androd的mediaplayer播放器api函数而编写. 锅巴视频工作室-----专业的移动设备视频客户端方案提供者 锅巴视频工作室,专注于android视频相关,蓝牙,wifi等软硬件项目的方案开发工作,欢迎联系:qq1852600324" 使用an

【CSS】如何用css做一个爱心

摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: 明白正方形的画法. 明白圆形的画法. 明白什么是定位. 明白怎么旋转. 话不多说,先教大家怎么用css画一个圆形. .disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300

用css打造一个三角形箭头

用css制作一个三角形箭头 三角形我们经常用在列表.下拉提示.面包屑导航的位置,给用户以导向的引导作用,比如,在有下拉列表的地方,我们可以用向下的箭头,在列表的时候,我们能告诉用户每个列表项和下一个列表项的关系,当在面包屑导航中,能让用户了解他现在所处的栏目或者频道.我们有哪些方法来实现它呢,下面我根据我们的实际工作中的经验作了简单的总结. 第一种方案,我们可以通过使用背景图片的方式来处理,这也是我们最经常用的方法.1)单个切出三角形,我们可以根据UI设计的需求,切出与之相适应的图片,比如 ,我

公司的一个面试题:如何用css让一个容器水平垂直居中?

原文:公司的一个面试题:如何用css让一个容器水平垂直居中? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .div1{ width: 100px; height: 100px; bo

CSS了一个浮动导航条

绝对浏览器窗口定位positio:FIXED: 下拉后出现返回顶部按钮 图片是我们美工给做的.55*55px,中间缝隙3px. css: html,body { height:100%}html,body,form,input,span,p,img,ul,ol,li,dl,dt,dd { margin:0; padding:0; border:0}ul,ol { list-style:none}body { background:#fff; font:12px/1.5 arial,sans-se