Question

我有一些数据包含一行标题和一行或多行要显示的值。目前，我正在使用HTML表格，但我遇到的情况是我有很多列，表格在屏幕的末尾。或者有些列名太长了（它们通常只是一个单词，下划线为空格），即使没有那么多列，表仍然会离开浏览器窗口的末尾。

我想要的是能够显示所有数据而无需水平滚动。即使这意味着将数据分成多个表。

我目前正在使用Embedded Perl，我使用的一个hackish解决方案是每个表只需硬编码8列，并在必要时在第一个下面启动一个新表。但理想情况下，我想要的是在一个表上动态地放置尽可能多的列，并在必要时包装到一行新的行/表/。

这可以仅使用HTML / CSS吗？或者我是否需要以某种方式计算每列将采用多少宽度，并以每个表的列数为基础？我不必使用HTML表，所以如果有更好的解决方案，我非常愿意使用它。

Answer 1

将table { display: inline; }与每列一个表结合使用可以解决您的问题。运行此命令并在Web浏览器中加载输出。调整窗口大小时，不适合的列会下拉。如果您不希望所有表都受到影响，您可能希望对表使用class。

#!/usr/bin/perl

use strict;
use warnings;

print "<html><head><style>table { display: inline }</style></head><body>";
for my $col (1 .. 100) {
    print "<table><tr><th>$col</th></tr>";
    for my $row (1 .. 10) {
        print "<tr><td>$row</td></tr>";
    }
    print "</table>";
}
print "</body></html>";

Answer 2

您可以做的是根据您拥有的列数在每列上设置宽度。最佳解决方案将具有百分比宽度，因此表格宽度可随页面宽度的变化而变化。

Answer 3

如果您制作多个表格，那么我假设您必须垂直向下滚动页面以查看所有数据。

另一种解决方案可能是将表格包装在div中，在div上设置宽度，并将div的溢出设置为滚动。这样整个页面不会水平滚动，但包含表格的div将有一个滚动条。

在HTML中包装表格数据

3 个答案: