将 tsv 表视为 html 并固定行和列标题答案

【问题标题】：View tsv table as html with row and column titles fixed将 tsv 表视为 html 并固定行和列标题
【发布时间】：2013-11-14 00:34:27
【问题描述】：

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

【问题讨论】：

标签： python html css visualization tsv

【解决方案1】：

您的 CSS 存在两个问题。

首先，您修复了错误的问题。您的内容是固定的，列标题也是固定的，但行标题不是，因此垂直或水平滚动只会滚动行标题。您只想滚动内容，保持标题不变，因此您想从 .content 中删除 position:fixed 并将其添加到 .rowtitle。

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

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

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

【讨论】：

感谢您的更正。问题是除了固定标题之外，我还希望最左边的列或行标题变得固定。我找不到这样的代码。您建议的那个非常有趣，但只修复了标题。另外我不知道如何更改内容表的位置。
@biojl：基本思想是创建两个 div 包装器——一个容器和一个滚动区域。您将标题和滚动区域放在容器内，并将主表体放在滚动区域内。这样，它们不会固定在浏览器页面的边缘，而是固定在容器的边缘，然后可以正常定位（如果需要，还可以缩放和滚动）。