0

我必须制作某种仪表板。它基本上是一张桌子，有很多数字（那些 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>

不确定这是否重要，但我想使用在鼠标悬停时显示的滚动条。像这个。

4

2 回答 2

1

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

  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. 我想使用在鼠标悬停时显示的滚动条。

    您可以使用简单的 CSS 来做到这一点。

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

    如果您希望滚动条的样式像 Facebook 那样，您需要使用一个名为jScrollPane的插件。


    （来源：tympanus.net）

  3. 如果您觉得需要对表格数据进行更出色的效果，请选择DataTables，这是 jQuery Javascript 库的插件。它是一个高度灵活的工具，基于渐进增强的基础，它将向任何 HTML 表格添加高级交互控件。


    （来源：webresourcesdepot.com）

于 2013-02-14T13:41:01.833 回答
0

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

Praveen Kumar 的回答对我不起作用

于 2013-03-18T13:45:36.363 回答