以 html 格式查看 tsv 表,并修复行和列标题



>我正在尝试在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固定标题",你应该找到很多关于如何创建一个容器的例子,该容器可以布置在页面上的任何位置,其中包含绝对标题区域和可滚动的正文区域。这个看起来像一个非常完整的示例。

最新更新