>我正在尝试在HTML中可视化一个大表。原点是一个 tsv 表。我寻找软件包来自动执行此操作,但最终我设法创建了一个创建所需HTML代码的python代码。我无法获得正确的可视化效果。
我将输出分为三个重叠的表。我希望列和行标题是固定的,因此当您浏览结果时,您始终知道它们对应的内容。这就是我目前所得到的。我认为它只需要在 css 中进行微小的修改。
f = open('output/overview_table.html','w')
print>>f,'<HTML>'
print>>f,'<link href="style.css" type="text/css" rel="stylesheet" />'
print>>f,'<div class="container">'
print>>f,' <div class="tableparent">'
print>>f,' <table class = "table rowtitle">'
print>>f,' <tr><td>Logo</td></tr>'
for locus in all_locus:
print>>f,' <tr><td>'+locus+'</td></tr>'
print>>f,' </table>'
print>>f,' <table class="table columntitle">'
print>>f,' <tr>'
print>>f,' <th></th>'
for indiv in records:
print>>f,' <th>'+indiv+'</th>'
print>>f,' </tr>'
print>>f,' </table>'
print>>f,' <table class="table content table-striped">'
for indiv in records:
print>>f,' <tr>'
for locus in all_locus:
if locus in records[indiv]:
print>>f,'<td>'+format(len(records[indiv][locus]))+'</td>'
else:
print>>f,'<td>NA</td>'
print>>f,' </tr>'
print>>f,' </table>'
print>>f,' </div>'
print>>f,' </HTML>'
f.close()
CSS可以通过一些示例输出在以下位置查看:
最新版本http://jsfiddle.net/Jg5vr/25/
任何帮助将不胜感激。
编辑
如果有人感兴趣,最后我只是使用了数据表
你的CSS有两个问题。
首先,你修复了错误的东西。您的内容是固定的,列标题也是固定的,但行标题不是,因此垂直或水平滚动只会滚动行标题。您只想滚动内容,而保留标题,因此要从.content
中删除position:fixed
并将其添加到.rowtitle
。
其次,您已经布置了内容,使其位于标题之上。只需更改其位置即可。
同时,除非您需要使用非常旧的浏览器,否则为什么不为表头使用 thead
而不是单独的表呢?
最后,您真的希望将标题固定到页面而不是某个父对象吗?如果你搜索"CSS固定标题",你应该找到很多关于如何创建一个容器的例子,该容器可以布置在页面上的任何位置,其中包含绝对标题区域和可滚动的正文区域。这个看起来像一个非常完整的示例。