Home > Web Front-end > HTML Tutorial > html css makes a browsable table_html/css_WEB-ITnose

html css makes a browsable table_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:47:04
Original
1267 people have browsed it

Now the requirements for displaying the table content are as follows:

1. The table is very large and the interface is not small, so it needs to be placed in a div.

2, you can use scroll to view it in the div.

3, the content in td remains in one line.

4, you can click tr, and then you can select and know which line you clicked.

html:

 

  🎜>//If the div width is smaller than the table, scroll will appear.

#table1 {border-collapse:collapse;height:100;}

#table1 table ,th, td {border: 1px solid black;}

#table1 td{

width:230px; / *The width is set as needed, and the percentage can also be set*/

height:25px;line-height:25px; /*The height is also set as needed*/

white-space:nowrap; /*Text display does not automatically wrap */

/*overflow:hidden;*/ /*Excess display*/

}

#div1 {border: 1px solid red;width:460; height:180px;overflow:scroll;}




js:

Add an onmousedown event handler to the click.
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 if( trs[o] == obj ){
trs[o].style.backgroundColor = 'lightblue';
choose = o;
}
else{
trs[o].style.backgroundColor = '';
}
}
}



You can communicate together.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template