2017-05-17 75 views
0

我想向我的html動態表格垂直添加滾動條。我已將表格放入div中,但似乎沒有工作。請幫助將滾動條垂直添加到表格

這是我的HTML代碼

<thead> 
    <tr> 
     <td colspan="5"> 
      <div class="scrollit"> 
       <th><span>ID</span></th> 
       <th><span>Name</span></th> 
       <th><span>Location</span></th> 
       <th><span>Date</span></th> 
       <th><span>Catagory</span></th> 
      </div> 
     </td> 
    </tr> 
</thead> 

PHP代碼

print "<tr>"; 
    print "<td>"; 
    print "<div>"; 
    print "<td >" . $row['ID'] . "</td>"; 
    print "<td >" . $row['Name'] . "</td>"; 
    print "<td >" . $row['Location'] . "</td>"; 
    print "<th >" . $row['Date'] . "</th>"; 
    print "<td >" . $row['Category'] . "</td>";  
    print "</div>"; 
    print "</td>"; 
    print "</tr>"; 
    }    
    print "</table>"; 

CSS代碼:

.scrollit { 
    overflow:scroll; 
    height:100px; 
} 

順便說一句,我從數據庫中檢索數據表。

+0

給予更新的摘要上課到喲你的div在PHP代碼 – Bhavik

+0

你需要看看這個。 http://stackoverflow.com/questions/8232713/how-to-display-scroll-bar-onto-a-html-table –

回答

1

你在你的HTML代碼有一些語法錯誤,請檢查下面

.scrollit { 
 
    width:100%; 
 
    overflow:scroll; 
 
    height:300px; 
 
    display: block; 
 
}
<div class="scrollit"> 
 
    <table width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th><span>ID</span></th> 
 
       <th><span>Name</span></th> 
 
       <th><span>Location</span></th> 
 
       <th><span>Date</span></th> 
 
       <th><span>Catagory</span></th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
      <tr> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
       <td>lorem ipsum</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

+0

我的桌子是一個動態的。它從數據庫中檢索數據。它不會像這樣工作 – Lisa234

+0

你可以使用你的php代碼而不是'tbody' 你不能在'th/td'標籤上面並列放置'div' –

+0

表格格式是正確的。將tr包裹在循環中 – Bhavik

0

嘗試它是這樣的:

.tbl_container{ 
 
    height: 50px; 
 
    overflow-y: scroll; 
 
}
<div class="tbl_container"> 
 
    <table border="1"> 
 
    <tr> 
 
     <td>row1 col1</td> 
 
     <td>row1 col2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>row2 col1</td> 
 
     <td>row2 col2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>row3 col1</td> 
 
     <td>row3 col2</td> 
 
    </tr> 
 
    </table> 
 
</div>