滚动导致的列对齐问题答案

【问题标题】：Column alignment issue caused by scrolling滚动导致的列对齐问题
【发布时间】：2019-08-30 23:39:46
【问题描述】：

我必须制作某种仪表板。它基本上是一个表格，有很多数字（那些 a,b,c-s 都是数字，可能最多 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.

【问题讨论】：

你想修复标题，就这样？

标签： html scroll html-table cross-browser

【解决方案1】：

在编写此代码之前，您需要知道需要使用的所有标签。

<div> 不能像孩子一样直接来到 <table>。请改用<tbody>。即使您是故意添加的，我还是建议您这样做。 :)
将标头包装在<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;}

对于您的问题...

由于滚动条，我无法将所有内容都放在一个表格中（或者可以吗？）

是的！您可以通过将它们附加到 <tbody> 标记中来将它们放在一个表中。还要注意，一个表中可以有很多<tbody>标签。
我想使用鼠标悬停时显示的滚动条。

您可以使用简单的 CSS 来做到这一点。
```
tbody {overflow: hidden;}
tbody:hover {overflow: auto;}
```
如果您希望滚动条的样式与 Facebook 一样，则需要使用名为 jScrollPane 的插件。

_{（来源：tympanus.net）}
如果您觉得需要对表格数据进行更棒的效果，请选择DataTables，这是 jQuery Javascript 库的插件。它是一个高度灵活的工具，以渐进增强为基础，可为任何 HTML 表格添加高级交互控件。

_{（来源：webresourcesdepot.com）}

【讨论】：

@Ark 更新了答案... :)

【解决方案2】：

我最终使用了固定宽度，这是我想避免的，但我不能

Praveen Kumar 的回答对我不起作用

【讨论】：