滾動引起的列對齊問題

Question

我必須製作某種儀表板。這將是基本表，其中一個批號的（那些A，B，CS都是數字，大概最多3位數字）

我的問題是，是，你可以在圖片中看到，我有幾個部分將是動態的（如：我不知道有多少條記錄），因此，我需要爲這些部分添加一個滾動條。

由於滾動條的原因，我無法將所有內容放在一張表中（或者我能嗎？），這可能會導致同一列可能無法始終對齊。它必須在基本上所有最新版本的瀏覽器中工作，並且我害怕將像素向左或向右丟失。

我想實現基本上是這樣的：（請注意，我添加了DIV中故意放錯了地方）

<table> 
<tr> 
    <td>a</td> 
    <td>b</td> 
</tr> 
<div id="div2" style="overflow-y: auto; overflow-x:hidden; height: 60px;> 
<tr> 
    <td>a</td> 
    <td>b</td> 
</tr> 
</div> 
<tr> 
    <td>a</td> 
    <td>b</td> 
</tr> 
</table> 

不知道這是很重要的或沒有，但我想使用顯示在鼠標上的滾動條。 Like this one.

Answer 1

我結束了使用固定寬度，這是我想避免的，但我不能

的Praveen Kumar的回答只是不適合我的工作

Answer 2

您需要知道在編碼之前需要使用的所有標籤。

1. <div>不能直接作爲孩子來<table>。改爲使用<tbody>。即使你有意添加它，我向你建議。 :)
2. 將標頭包裝在<thead>中並給出正確的填充。

所以，最終，你的代碼應該是這樣的：

<table> 
    <thead> 
     <tr> 
      <td>a</td> 
      <td>b</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>a</td> 
      <td>b</td> 
     </tr> 
     </div> 
     <tr> 
      <td>a</td> 
      <td>b</td> 
     </tr> 
    </tbody> 
</table> 

而且你的CSS這樣的：

tbody {overflow-y: auto; overflow-x:hidden; height: 60px;} 

---

併爲您的問題...

1. 由於滾動條的，我不能把一切都放在一個表（或可以嗎？）

   是的！您可以將它們放在一個表格中，方法是在<tbody>標記內附加它們。另請注意，一個表格內可能有許多<tbody>標籤。

2. 我想使用顯示onmouseover的滾動條。

   你可以用一個簡單的CSS來做到這一點。

   tbody {overflow: hidden;} 
   tbody:hover {overflow: auto;} 
   

   如果你想被造型像Facebook如何有滾動條，你需要使用一個名爲jScrollPane插件。

   http://cdn.tympanus.net/codrops/wp-content/uploads/2011/09/ScrollbarVisibility.jpg?84cd58

3. 如果你覺得你需要在你的表格數據多一些真棒效果，去DataTables，插件爲jQuery JavaScript庫。這是一個高度靈活的工具，基於逐步增強的基礎，它將爲任何HTML表添加高級交互控件。

   http://www.webresourcesdepot.com/wp-content/uploads/image/datatables.gif