Learn how to make Web pages: Add a scroll bar to a table

Tips | Web page

In fact, there is no technical content of this thing, is to provide you with a table to add the idea of the scroll bar .

Run Code Box

<ptml><pead><title>my table</title><style>.table0 {height:90%}. Table0 caption{width:100%;height:26px;line-height:26px;font-size:20px;font-color:black;font-weight:900; LETTER-SPACING:5PX}. TABLE0 thead td {Text-align:center;vertical-align:middle;height:20px;line-height:18px;font-size:14px;font-color: Black;font-weight:bold;padding-top:2px;padding-bottom:2px;border: #555 1px solid;margin:0px;}. Table0 tfoot Td{text-align:left;vertical-align:middle;height:20px;line-height:18px;font-size:12px;font-color: Black;font-weight:bold;padding-top:2px;padding-bottom:2px;padding-left:12px;padding-right:12px;border: #555 1px Solid}. TABLE0 tbody td {Width:100%;height:auto;border: #555 1px solid;padding:0px;margin:0px}. Table1 Tbody td {Text-align:left;vertical-align:middle;height:20px;line-height:18px;font-size:14px;font-color:# 444;font-weight:normal;padding-top:2px;padding-bottom:2px;padding-left:12px;padding-right:12px;border-right:# 555 1px solid;border-bottom: #555 1px solid; overflow:hidden;text-overflow:ellipsis;word-break:keep-all;word-wrap:normal;} </style><script>function init () {thet=createtable ("My Favorites", ["group:150", "name:300", "url:200", "Visited : M "," modify:100 "," delete:100 "])//Parameter description: CreateTable (strcaption,colheads)//strcaption title//colheads is an array, The format of each item is the name: width of the string for (Var i=0;i<40;i++) {Ther=thet.insertrow (), for (Var j=0;j<7;j++) {Thec=ther.insertcell () ; thec.innertext=j;}}} function CreateTable (strcaption,colheads) {//Parameter description: Colheads is an array, the format of each item is name: Width of string//Generate table otable= Document.createelement ("table");d Ocument.body.insertBefore (otable);//Set Classotable.classname= "Table0"; Otable.style) {tablelayout= "fixed"; bordercollapse= "collapse" borderspacing= "0px";} Set Variable otcaption=otable.createcaption (); Othead=otable.createthead (); Otfoot=otable.createtfoot ();// Generate header otcaption.innertext=strcaption;//Set column width Othead.insertrow (); for (Var i=0;i<colheads.length;i++) {THeadName= Colheads[i].split (":") [0];theadwidth=isnan (Parseint Colheads[i].split (":") [1])? " Auto ":p Arseint (Colheads[i].split (": ") [1]); Thecell=othead.rows[0].insertcell (); thecell.style.width=theadwidth;} Thecell=othead.rows[0].insertcell (); thecell.width=20;othead.rows[0].style.display= "None";/ Generate table Header Othead.insertrow (); for (Var i=0;i<colheads.length;i++) {theadname=colheads[i].split (":") [0];theadwidth= isNaN (parseint (Colheads[i].split (":") [1]))? " Auto ":p Arseint (Colheads[i].split (": ") [1]); Thecell=othead.rows[1].insertcell (); thecell.innertext=theadname; Thecell.style.width=theadwidth;} Thecell=othead.rows[1].insertcell (); thecell.width=24;//Generate table Foot Otfoot.insertrow (); Thecell=otfoot.rows[0]. InsertCell (); thecell.innerhtml= "<marquee scrolldelay=50 scrollamount=2>copy Rights 2005. Hutia presents.</marquee> "; Thecell=otfoot.rows[0].insertcell (); thecell.colspan=colheads.length-1;thecell= Otfoot.rows[0].insertcell (); thecell.width=20;//generated principal oTable.all.tags ("tbody") [0].insertrow (); thecell= OTable.all.tags ("tbody") [0].rows[0].insertcell (); thecell.colspan=colheads.length+1;omain=document. createelement ("DIV"); Thecell.insertbefore (Omain); with (Omain.style) {width= "100%"; height= "100%"; overflowy= "auto "; overflowx=" hidden "; margin=" 0px "; marginleft=" -1px ";} Otbody=document.createelement ("table"); Omain.insertbefore (otbody); otable.otbody=otbody;// Prohibit the selection of otcaption.onselectstart=othead.onselectstart=otfoot.onselectstart=function () {return (false);} Set classotbody.classname= "Table1"; with (Otbody.style) {width=otable.offsetwidth-15;tablelayout= "fixed"; Bordercollapse= "collapse" borderspacing= "0px";p adding= "0px"; margin= "0px";} Initialize column width otbody.insertrow (); for (Var i=0;i<colheads.length;i++) {Theadwidth=isnan (parseint colheads[i].split (":") ) [1])? " Auto ":p Arseint (Colheads[i].split (": ") [1]); Thecell=otbody.rows[0].insertcell (); thecell.style.width=theadwidth;} Otbody.rows[0].style.display= "None"; return (otbody);} function InsertRow () {var intl=otbody.rows.length;therow=otbody.insertrow (); therow.index=intl;therow.onmouseover= Rowonmouseover;therow.onmouseout=rowonmouseout;therow.onclick=rowonclick;for (Var i=0; i<colheads.length;i++) {Thecell=therow.insertcell (); thecell.tabindex=0;thecell.hidefocus=true; Thecell.colindex=i;thecell.onmouseover=function () {This.focus ();}; Thecell.onmouseout=cellonblur;thecell.onfocus=cellonfocus;thecell.onblur=cellonblur;} Therow.cells[0].innertext=strgroup?strgroup: "ROOT"; Therow.cells[1].innertext=strname?strname: "Untitled Document ."; Therow.cells[2].innertext=strurl?strurl: "Unspecified URL"; therow.cells[3].innerhtml=strvisited? " Yes ". FontColor (" Red "):" Unknow "; therow.cells[4].innerhtml=strmodify?" Yes ". FontColor (" Red "):" No ". FontColor (" Green "); therow.cells[5].innerhtml=" Delete ". FontColor (" Red "); </script></pead><body ></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]