1

我正在尝试用 HTML 可视化一个大表。原点是一个 tsv 表。我寻找包来自动执行此操作，但最后我设法创建了一个 python 代码来创建所需的 HTML 代码。我无法获得正确的可视化。

我将输出分成三个重叠的表。我希望列和行标题变得固定，因此当您浏览结果时，您总是知道它们对应的内容。这就是我到目前为止所得到的。我认为它只需要对 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

4

1 回答 1

1

你的 CSS 有两个问题。

首先，你已经修复了错误的东西。您的内容是固定的，您的列标题也是固定的，但您的行标题不是，因此垂直或水平滚动只会滚动行标题。您只想滚动内容，保持标题不变，因此您想将其position:fixed从..content.rowtitle

其次，您已经对内容进行了布局，使其位于标题之上。只需更改其位置即可。

同时，除非您需要使用非常旧的浏览器，否则为什么不使用 athead作为表头而不是单独的表呢？

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

于 2013-11-12T19:20:13.070 回答