Как заставить столбец таблицы не расширяться, когда ячейка большая? вот демонстрация. white-space:nowrap;
bc Я хочу одну строку. text-overflow:ellipsis;
для эллипсиса я хочу (чего он не делает) и overflow:hidden
всякий случай. Он полностью игнорирует мой переполнение и многоточие. Демо показывает проблему (firefox 27 и chrome)
<table>
<tbody><tr>
<th>Firstname</th>
<th class="lastname">Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td class="lastname">I am a jerk I am a jerk I am a jerk I am a jerk I am a jerk I am a jerk I am a jerk I am a jerk</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</tbody></table>
CSS:
table,th,td
{
border:1px solid black;
}
table { width: 800px }
.lastname { width: 300px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:red;}
Вы можете добавить table-layout: fixed;
к элементу <table>
, чтобы задать ширину таблицы/столбцов по ширине первой строки ячеек.
table { table-layout: fixed; }
17.5.2 Алгоритмы ширины таблицы: свойство "table-layout"
Свойство
table-layout
управляет алгоритмом, используемым для размещения ячеек, строк и столбцов таблицы
fixed
Использовать алгоритм размещения фиксированной таблицы
Где спецификация заявляет:
17.5.2.1 Фиксированная схема таблицы
С помощью этого (быстрого) алгоритма горизонтальная компоновка таблицы не зависит от содержимого ячеек; это зависит только от ширины таблицы, ширины столбцов и границ или расстояний между ячейками.
CSS:
table,th,td
{
border:1px solid black;
}
table { width: 800px }
.lastname { word-wrap: break-word; width: 300px; color:red;}
}
Используйте word-warp: break-word;
внутри вашего класса .lastname
вот скрипка: http://jsfiddle.net/5VKZ6/