Web page making fancy tables also add scroll bars

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.

The following is the source code:

<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 : "," "modify:100", "delete:100"]); Parameter description: createtable (strcaption,colheads)//strcaption header//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"); Document.body.insertBefore (otable); Set class Otable.classname= "Table0"; With (Otable.style) {tablelayout= "fixed"; Bordercollapse= "collapse" borderspacing= "0px"; }//Set Variable otcaption=otable.createcaption (); Othead=otable.createthead (); Otfoot=otable.createtfoot (); Generate title 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; Generate 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 class Otbody.classname= "Table1"; With (Otbody.style) {width=otable.offsetwidth-15; tablelayout= "fixed"; Bordercollapse= "collapse" borderspacing= "0px"; padding= "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]