滚动引起的列对齐问题

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