Как я могу использовать эллипсы в таблице ширины жидкости, не делая каждый столбец одинакового размера?
Позволять'скажем, мои столбцы в таблице,id
name
description
, а такжеphone
,description
столбец состоит из 1-255 символов, но идентификатор не более 3 символов.
Мне бы хотелось, чтобы столбцы имели соответствующий размер, а не каждый столбец одинакового размера. И я'мне нравитсяdescription
столбец для переполнения многоточием, когда окно слишком мало, чтобы вместить содержимое целиком.
table-layout:fixed;
это стандартный способ сделатьtext-overflow: ellipsis;
работать, но он изменяет размер всех столбцов до одинакового размера. Я'предпочитаю сохранить ширинуauto
а не исправлено.
Вы можете помочь?
Вот'мойjsFiddle:http://jsfiddle.net/RQhkk/1/
Вот'скриншот того, что яЯ имею дело с:
Обратите внимание, какTable 1
делает все столбцы одинакового размера? Тот'это ужасно
Обратите внимание, какTable 2
размеры столбцов в зависимости от содержимого? Тот'хорошо. За исключением случаев, когда контент слишком длинный:Table 3
, Тогда это нене подходит В этом случае яМне бы хотелось, чтобы оно переполнилось многоточием.
И здесь's моя таблица html и код css:
id
name
description
phone
1
alpha
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
555-555-5555
2
beta
Sed et nulla neque.
555-555-5555
3
gamma
Morbi imperdiet neque ut lorem rhoncus fermentum.
555-555-5555
#t1 table {
table-layout:fixed;
width:100%;
}
#t1 td {
white-space: nowrap;
}
#t1 td.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
Если я удалюtable-layout: fixed;
ширина столбца - это то, что выбуду ожидать - по размеру контента. К сожалению, я просто могуМноготочие работает без фиксированной разметки. Куда я иду не так?