Обтекание табличных данных в HTML - PullRequest
Новая
       9

Обтекание табличных данных в HTML

3 голосов
/ 24 апреля 2009

У меня есть некоторые данные с одной строкой заголовков и одной или несколькими строками значений, которые я хочу отобразить. В настоящее время я использую таблицу HTML, но я сталкивался с ситуациями, когда у меня так много столбцов, что таблица выходит за пределы экрана. Или что некоторые имена столбцов такие длинные (обычно это просто одно слово с подчеркиванием в виде пробелов), даже если столбцов не так много, таблица все равно выходит за пределы окна браузера.

Я хочу, чтобы у меня была возможность отображать все данные без горизонтальной прокрутки. Даже если это означает разбивку данных на несколько таблиц.

В настоящее время я использую Embedded Perl, и одно из хакерских решений, которое я использовал, это просто жестко закодировать 8 столбцов на таблицу и при необходимости начать новую таблицу под первой. Но в идеале я хочу динамически разместить как можно больше столбцов в одной таблице и перенести их на новую строку строк / таблиц / что угодно, если это необходимо.

Может ли это быть сделано только для HTML / CSS? Или мне нужно как-то рассчитать, сколько ширины займет каждый столбец, и на этом основывать количество столбцов в таблице? Мне не нужно использовать таблицы HTML, поэтому, если есть лучшее решение, я более чем готов его использовать.

Ответы [ 3 ]

2 голосов
/ 24 апреля 2009

Использование table { display: inline; } в сочетании с одной таблицей на столбец должно решить вашу проблему. Запустите это и загрузите вывод в веб-браузер. При изменении размера окна столбцы, которые не помещаются, выпадают. Возможно, вы захотите использовать 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>";
1 голос
/ 24 апреля 2009

Что вы можете сделать, это установить ширину каждого столбца в зависимости от того, сколько столбцов у вас есть. Лучшее решение будет иметь ширину в процентах, поэтому ширина таблицы может меняться при изменении ширины страницы.

0 голосов
/ 24 апреля 2009

Если вы создаете несколько таблиц, то, я полагаю, вам придется прокручивать страницу вертикально вниз, чтобы увидеть все данные.

Другое решение может заключаться в том, чтобы обернуть таблицу в div, установить ширину в div и установить для переполнения этого div прокрутку. Таким образом, вся страница не будет прокручиваться горизонтально, но у div, содержащего таблицу, будет полоса прокрутки.

...