2014-11-23 120 views
0

我試圖做一些add scroll bar to table body的行來添加滾動到我的表,但它似乎並沒有工作。 這是我的佈局(http://jsfiddle.net/cvvrjtdd/5/):滾動不能在HTML表格中工作

<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; 
} 

回答

0

您簡單的不能粘貼錶行之間的任何DOM元素。
嘗試使用tbody

Fiddle

+0

感謝,td.centerAlign似乎沒有了,雖然工作。 http://jsfiddle.net/cvvrjtdd/7/它有關係嗎? – Shan 2014-11-23 21:09:42

+0

不,這是工作。它將單元格中的文本對齊中心。嘗試設置列寬。 – 2014-11-23 21:19:13