Div+CSS實現表格滾動，JS隱藏和顯示Div例子
最近寫了一點前台的東西，實現的功能為：
Div+Css實現滾動條功能，另外使用了JS隱藏和顯示Div。
div的visibility可以控制div的顯示和隱藏，但是隱藏后頁面顯示空白；div的display屬性可以使div隱藏后釋放占用的頁面空間
代碼如下：
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function HideDiv() 5 { 6 document.getElementById("myDiv").style.display="none"; 7 } 8 function ShowDiv() 9 { 10 document.getElementById("myDiv").style.display=""; 11 } 12 function HideDivUseVisibility() 13 { 14 document.getElementById("myDiv").style.visibility="hidden";//隱藏 15 } 16 function ShowDivUseVisibility() 17 { 18 document.getElementById("myDiv").style.visibility="visible";//顯示 19 } 20 </script> 21 <style type="text/css"> 22 body{text-align:center;} 23 #myDiv{margin-right:auto; 24 margin-left:auto; 25 height:600px; 26 width:1020px; 27 vertical-align:middle; 28 line-height:20px; 29 overflow:scroll; 30 } 31 #showNumber 32 { 33 text-align:center; 34 width:1500px; 35 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 36 border-collapse:collapse; 37 } 38 39 40 #showNumber tr.alt td 41 { 42 color:#000000; 43 background-color:#EAF2D3; 44 } 45 #showNumber th 46 { 47 font-size:1.1em; 48 text-align:left; 49 padding-top:5px; 50 padding-bottom:4px; 51 background-color:#A7C942; 52 color:#ffffff; 53 } 54 #showNumber td, #showNumber th 55 ｛ 56 font-size:1em; 57 border:1px solid blue; 58 padding:3px 7px 2px 7px; 59 ｝ 60 61 </style> 62 </head> 63 <body> 64 <div id="myDiv"> 65 <table id="showNumber"> 66 <tr><th>數字1</th><th>數字2</th><th>數字3</th><th>數字4</th><th>數字5</th><th>數字6</th><th>數字7</th><th>數字8</th><th>數字9</th><th>數字10</th><th>數字11</th><th>數字12</th></tr> 67 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 68 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 69 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 70 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 71 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 72 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 73 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 74 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 75 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 76 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 77 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 78 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 79 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 80 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 81 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 82 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 83 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 84 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 85 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 86 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 87 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 88 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 89 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 90 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 91 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 92 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 93 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 94 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 95 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 96 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 97 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 98 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 99 <tr class="alt"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 100 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 101 </table> 102 </div> 103 <input type="button" id="btnHideDiv" value="Hide Div" onclick="HideDiv()"/> 104 <input type="button" id="btnShowDiv" value="Show Div" onclick="ShowDiv()"/> 105 <input type="button" id="btnHideDivUseVisibility" value="Hide div use visibility" onclick="HideDivUseVisibility()"/> 106 <input type="button" id="btnShowDivUseVisibility" value="Show div use visibility" onclick="ShowDivUseVisibility()"/> 107 </body> 108 </html>
截圖如下：