CSS/Javascript для принуждения строки таблицы HTML на одной строке
Альтернативное решение, использующее метод .query () :
In [5]: df.query("countries in @countries")
Out[5]:
countries
1 UK
3 China
In [6]: df.query("countries not in @countries")
Out[6]:
countries
0 US
2 Germany
8 ответов
Используйте пробел свойства CSS: nowrap и переполнение: скрытый на Вашем td.
Обновление
Просто видело Ваш комментарий, не уверенный, что я думал, я сделал это так много раз, я забыл, как я делаю это. Это - подход, который работает хорошо в большинстве браузеров для меня... вместо того, чтобы пытаться ограничить td, я использую отделение в td, который обработает экземпляр переполнения. Это имеет хороший побочный эффект способности добавить Ваше дополнение, поля, цвета фона, и т.д. Вашему отделению вместо того, чтобы пытаться разработать td.
<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>
<div class="hideextra" style="width:200px">
this is the text in column one which wraps</div></td>
<td>
<div class="hideextra" style="width:100px">
this is the column two test</div></td>
</tr>
</table>
</body>
</html>
В качестве награды, IE поместит замещающий знак в случае переполнения с помощью определенного для браузера текстового-overflow:ellipsis стиля. Существует путь к , делают то же в FireFox автоматически также, но я не протестировал его сам.
Обновление 2
я начал использовать этот код усечения Justin Maxwell в течение нескольких месяцев теперь, который работает правильно в FireFox также.
Этот прием здесь использует тайное table-layout:fixed правило
, Этот CSS должен работать против Вашего демонстрационного HTML:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
также необходимо определить явную ширину столбцов для <td> с.
Эти table-layout:fixed в правиле говорится, что "Ширины ячеек этой таблицы зависят от того, что я говорю, не от фактического содержания в ячейках". Это обычно полезно, потому что браузер может начать отображать таблицу после того, как это получило первое <tr>. Иначе браузер должен получить всю таблицу, прежде чем это сможет вычислить ширину столбцов.
Как cletus сказал, необходимо использовать white-space: nowrap для предотвращения обертывания строки, и overflow:hidden для сокрытия переполнения. Однако для текста, который будут считать переполнением, необходимо установить td/th ширину, поэтому в случае, если текст требует больше, чем указанная ширина, это будут считать переполнением и будут скрыты.
кроме того, если Вы даете демонстрационную веб-страницу, респонденты могут предоставить обновленной странице фиксацию, которую Вы любите.
Попытка:
td, th {
white-space: nowrap;
overflow: hidden;
}
Интересно, могло ли стоить использовать PHP (или другой язык сценариев серверной стороны) или JavaScript для усечения строк к правильной длине (хотя вычисление правильной длины хитро, если Вы не используете шрифт фиксированной ширины)?
Если Вы не хотите, чтобы текст перенесся, и Вы не хотите, чтобы размер столбца стал больше, затем устанавливает ширину и высоту на столбце и наборе "переполнение: скрытый" в Вашей таблице стилей.
, Чтобы сделать это только на одном столбце Вы захотите добавить класс к тому столбцу на каждой строке. Иначе можно установить его на всех столбцах, который ваше дело.
HTML:
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td class="column-1">this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table>
stylsheet:
.column-1
{
overflow: hidden;
width: 150px;
height: 1.2ex;
}
исключая единицей относительный размер шрифта для высоты, если Вы используете пиксели для установки размера шрифта, можно хотеть использовать это вместо этого.
Если Вы скрываете переполнение и существует длинное слово, Вы рискуете освобождать то слово, таким образом, Вы могли пойти один шаг вперед и использовать "переход на новую строку" css атрибут.
http://msdn.microsoft.com/en-us/library/ms531186 (По сравнению с 85) .aspx
Для тех, кто дополнительно интересуется:
Существующие ячейки динамической таблицы: ## Длинный текст без ПРОБЕЛОВ, т.е. адреса электронной почты ##
Кажется, полная репликация MS (и других) использование text-overflow: многоточие нельзя дублировать в FireFox, поскольку это касается добавления внутренне добавленных … к вырезанному тексту; особенно без javascript, который в наши дни часто отключается пользователями.
Все идеи, которые мне помогли, не смогли решить проблему динамического изменения размера и длинного текста без пробелов.
Однако мне нужно было вырезать таблицу динамической ширины в одном из окон администрирования моих программ. Так что, немного поигравшись, можно взломать приемлемый для всех браузеров ответ из предоставленных образцов на «MSDN».
т.е.
<table width="20%" border="1" STYLE="position: absolute; top: 100;">
<tr>
<td width="100%"><DIV STYLE="position: relative; height: 14px; top: 0px; width:100%;">
<DIV STYLE="position: absolute; left: 0px; top: 0px; color: black; width: 100%; height: 14px;
font: 12px Verdana, Arial, Geneva, sans-serif; overflow: hidden; text-overflow:ellipsis;">
<NOBR>fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.</NOBR></DIV>
</DIV>
</td>
</tr>
</table>
Единственный небольшой недостаток - пользователи Firefox не видят бит «…»; что, в общем, я не возражаю на данном этапе.
Будем надеяться, что FF в будущем разрешится корректно, если будет реализована эта очень важная полезная опция. Так что теперь мне не нужно переписывать, используя менее благоприятный футуристический не табличный контент (не спорьте; в наши дни вокруг много сломанных веб-сайтов).
Благодарность: http://msdn.microsoft.com/en-us/library/ms531174 (VS.85) .aspx
Надеюсь, это поможет некоторым телам.