Heim  >  Artikel  >  Web-Frontend  >  html+css 做成一个可浏览的表格_html/css_WEB-ITnose

html+css 做成一个可浏览的表格_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:47:041253Durchsuche

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

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

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

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

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

 

html:

  

    

  

 

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[i].onmousedown = function(){  
   tronmousedown(this);
  }  
 }  
}
function tronmousedown(obj){  
 for( var o=1; o  if( trs[o] == obj ){  
   trs[o].style.backgroundColor = 'lightblue';
   choose = o;
  }  
  else{  
   trs[o].style.backgroundColor = '';  
  }  
 }  
}

可以一起交流。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn