Допустим, мои столбцы в таблице: 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. Тогда не подходит. В этом случае я бы хотел, чтобы он переполнялся многоточием.
А вот моя таблица html и код css:
<div id="t1">
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th class="ellipsis">description</th>
<th>phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>alpha</td>
<td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td>555-555-5555</td>
</tr>
<tr>
<td>2</td>
<td>beta</td>
<td class="ellipsis">Sed et nulla neque.</td>
<td>555-555-5555</td>
</tr>
<tr>
<td>3</td>
<td>gamma</td>
<td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
<td>555-555-5555</td>
</tr>
</tbody>
</table>
</div>
<style>
#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;
}
</style>
Если я удалю table-layout: fixed;, ширина столбцов будет такой, какой вы ожидаете, - по размеру содержимого. К сожалению, я просто не могу заставить многоточие работать без фиксированного макета. Где я ошибаюсь?
