我必须制作某种仪表板。它基本上是一个表,有很多数字(那些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>
不确定这是否重要,但我想使用显示onmouseover的滚动条。 Like this one.
答案 0 :(得分: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>
个标记。
我想使用显示onmouseover的滚动条。
你可以使用一个简单的CSS来做到这一点。
tbody {overflow: hidden;}
tbody:hover {overflow: auto;}
如果您希望滚动条的样式与Facebook的样式相同,则需要使用名为jScrollPane的插件。
http://cdn.tympanus.net/codrops/wp-content/uploads/2011/09/ScrollbarVisibility.jpg?84cd58
如果您觉得需要对表格数据有更强大的影响,请转到DataTables,这是jQuery Javascript库的插件。它是一个高度灵活的工具,基于渐进增强的基础,它将为任何HTML表添加高级交互控件。
http://www.webresourcesdepot.com/wp-content/uploads/image/datatables.gif
答案 1 :(得分:0)
我最终使用了修复宽度,这是我想要避免的,但我不能
Praveen Kumar的答案对我不起作用