Home/ Questions/Q 207357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T17:43:42+00:00

I have some data with one row of headers and one or more rows

  • 0

I have some data with one row of headers and one or more rows of values that I want to display. Currently, I’m using an HTML table, but I’ve come across situations where I have so many columns, the table goes off the end of the screen. Or that some column names are so long (they’re usually just a single word that have underscores as spaces), even if there aren’t that many columns, the table still goes off the end of the browser window.

What I want is to be able to display all data without having to scroll horizontally. Even if that means breaking the data up into multiple tables.

I’m currently using Embedded Perl, and one hackish solution I’ve used is to just hardcode 8 columns per table, and start a new table under the first if necessary. But ideally, what I want is to dynamically put as many columns as possible on one table, and wrap to a new line of rows/tables/whatever if necessary.

Can this be done HTML/CSS-only? Or do I need to somehow calculate how much width each column will take, and base my number of columns per table on that? I don’t have to use HTML tables, so if there’s a better solution, I’m more than willing to use it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using table { display: inline; } combined with one table per column should solve your problem. Run this and load the output in a web browser. When you resize the window the columns that won’t fit drop down. You might want to use a class with the tables if you don’t want all tables affected.

    #!/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>";
    • 0