滚动不能在HTML表格中工作

Question

我试图做一些add scroll bar to table body的行来添加滚动到我的表，但它似乎并没有工作。 这是我的布局（http://jsfiddle.net/cvvrjtdd/5/）：

<div align="center"> 
    <table class="sampleTable"> 
     <tr> 
      <th class="centerAlign" colspan="3"> 
       <b>HEADER</b> 
      </th> 
     </tr> 
     <tr> 
      <th class="centerAlign">COLUMN 1</th> 
      <th class="centerAlign">COLUMN 2</th> 
      <th class="centerAlign">COLUMN 3</th> 
     </tr> 
     <tbody class="scroll"> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      <tr> 
       <td class="centerAlign"> 
        <a href="google.com">DATA</a> 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
       <td class="centerAlign"> 
        DATA 
       </td> 
      </tr> 
      </tbody> 
     </table> 

而且我的CSS

table.sampleTable { 
    border: 0; 
    width: 60%; 
    height: 90%; 
    display: block; 
} 

td.centerAlign, th.centerAlign { 
    text-align: center; 
} 

tbody.scroll { 
    overflow: scroll; 
    height: 100px; 
    display: block; 
} 

Answer 1

您简单的不能粘贴表行之间的任何DOM元素。
尝试使用tbody：

Fiddle