滚动导致列对齐问题

时间:2013-02-14 13:36:15

标签: html scroll html-table cross-browser

我必须制作某种仪表板。它基本上是一个表,有很多数字(那些a,b,c-s都是数字,可能最多3位数)

This is what I would like to do

我的问题是,正如你在图片中看到的那样,我有一些动态的部分(如:我不知道有多少记录),因此,我需要添加一个滚动条对于那些部分。

由于滚动条,我无法将所有内容放在一个表中(或者我可以吗?),这可能会导致同一列可能不会始终对齐。它必须在基本上所有最新版本的浏览器中工作,我害怕丢失左侧或右侧的像素。

我想要实现的基本上是这样的:(注意我故意将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>

不确定这是否重要,但我想使用显示onmouseover的滚动条。 Like this one.

2 个答案:

答案 0 :(得分:1)

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

  1. <div>不能直接作为孩子来<table>。请改用<tbody>。即使您是故意添加它,我也建议您这样做。 :)
  2. <thead>中包裹标题并给出正确的填充。
  3. 因此,最终,您的代码应如下所示:

    <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

答案 1 :(得分:0)

我最终使用了修复宽度,这是我想要避免的,但我不能

Praveen Kumar的答案对我不起作用