html css makes a browsable table_html/css_WEB-ITnose

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.