在 HTML 中包装表格数据答案

【问题标题】：Wrapping tabular data in HTML在 HTML 中包装表格数据
【发布时间】：2010-10-21 11:17:45
【问题描述】：

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

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

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

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

【问题讨论】：

你怎么知道多大才算太大？如果用户调整浏览器窗口的大小怎么办？听起来像是 javascript 问题，而不是 perl 问题...

标签： html perl html-table

【解决方案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>";

【讨论】：

谢谢！我试了一下，发现这很好用。我还有一个问题。有没有办法让任何给定行中的所有表格占据整个宽度（浏览器或 div）？现在，如果我有多行表格，右侧将全部交错，具体取决于该行中各个表格的宽度。这没什么大不了的，但最好让每一行中最右边的表都垂直对齐。
没有办法提前知道哪些行会在最后，所以没有办法让它们排成一行。

【解决方案2】：

您可以根据拥有的列数为每列设置一个宽度。最好的解决方案是百分比宽度，因此表格宽度可以随着页面宽度的变化而变化。

【讨论】：

【解决方案3】：

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

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

【讨论】：