Question

我正在尝试用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/

任何帮助将不胜感激。

修改

如果有人有兴趣，我最后只使用了DataTables

Answer 1

您的CSS存在两个问题。

首先，你修复了错误的东西。您的内容是固定的，您的列标题也是如此，但您的行标题不是，因此纵向或横向滚动只会滚动行标题。您只想滚动内容，保留标题，因此您要从position:fixed中删除.content并将其添加到.rowtitle。

其次，您已经布置了内容，因此它位于标题之上。只需更改其位置即可。

与此同时，除非您需要使用非常旧的浏览器，为什么不使用thead作为表标题而不是单独的表？

最后，你真的希望标题固定在页面而不是某些父对象吗？如果您搜索“CSS fixed header”，您应该找到很多关于如何创建容器的示例，该容器可以布置在包含绝对标题区域和可滚动正文区域的页面上的任何位置。 This one看起来是一个非常完整的例子。

将tsv表视为html，其中行和列标题已修复

1 个答案: