Гибкая таблица со скрытым содержимым - PullRequest
1 голос
/ 13 октября 2011

У меня есть таблица, полная данных, которая обычно довольно управляема, но иногда мы получаем столбец с невероятно длинными данными (обычно URL-адрес).Перенос не возможен, так как вертикальное пространство более ценно, чем горизонтальное.

Я предложил вариант, в основном, установить минимальную ширину для определенных столбцов (которые будут помечены пользователем), так что еслиБраузер пользователя достаточно широк, чтобы справиться с ним, он увидит всю строку, а если нет, то увидит усеченную версию.Я знаю, что свойство переполнения на самом деле не работает с ячейками таблицы, но, к счастью, у нас уже есть все содержимое ячеек, обернутое в <div>, поэтому я должен быть в состоянии сделать это.текущий код: http://jsfiddle.net/brandondurham/nK9LA/

Вы увидите в CSS, что я пытаюсь установить min-width в 5-м столбце:

table th:nth-child(5),
table td:nth-child(5) {
    width: 1px; }
table th:nth-child(5) a,
table td:nth-child(5) span {
    background: rgb(180,180,180);
    min-width: 40px;
    text-overflow: ellipsis; }

Однако, это не работает.Мне в основном нужен этот столбец, чтобы скрыть переполненный контент (с минимальной шириной 40 пикселей), когда браузер слишком мал, чтобы отобразить всю строку.

Рекомендации по его удалению?

О, и заметьте, у меня нет тегов "Javascript" в моих тегах.:)

1 Ответ

3 голосов
/ 13 октября 2011

Если я не понимаю, измените min-width на max-width, чтобы усечь содержимое: http://jsfiddle.net/blineberry/nK9LA/7/

ОБНОВЛЕНИЕ (так как я неправильно понял):

Я бы использовалМедиа-запросы для настройки width или max-width при различной ширине браузера.В этом примере max-width: 100px; применяется, когда экран имеет ширину менее 500 пикселей: http://jsfiddle.net/blineberry/nK9LA/22/embedded/result/

Медиа-запросы могут быть заполнены для браузеров, которые не поддерживают response.js.

...