Почему я не могу указать ширину и высоту ячейки в таблице HTML?

Question

Я использую CSS, но для быстрого тестирования я просто использую встроенный стиль. Вот код, который я пытаюсь реализовать:

echo "<td style='height=10px; width=10px;'>";

это гарантирует, что максимальная ширина ячейки составляет 10 пикселей, однако высота переполняется текстом, и она становится очень большой (высокой).

Я пытаюсь получить любую информацию, которая содержит в этой ячейке более 30 символов, которые я хочу скрыть, чтобы вы ее не видели.

(я знаю, что 30 символов - это больше, чем 10 пикселей, но я просто играю, чтобы посмотреть, сработало ли это!)

Answer 1

Ваш синтаксис неправильный:

Плохо

echo "<td style='height=10px; width=10px;'>";

Хорошо

echo "<td style='height:10px; width:10px;'>";

Однако это не решает проблему. При чтении spec только фиксированные таблицы макетов могут обрезать свое содержимое при переполнении (в отличие от изменения размера, чтобы приспособиться к нему).

Лучше / проще было бы использовать DIV.

См. Этот пример: http://jsfiddle.net/Aa4JL/

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

<table>
    <tr>
     <td><div style='height:10px; width:10px; overflow: hidden;'>This text is clipped.</div></td>         
    </tr>
</table>​

Обратите внимание: если вы не заботитесь об отсечении по высоте, вы можете добиться хорошего эффекта эллипсов, используя таблицы с фиксированной компоновкой в ​​сочетании с white-space: nowrap в сочетании с text-overflow: ellipsis. Это не требует упаковки содержимого с DIV. Обратите внимание, что эффект многоточия будет работать только в новых браузерах (в старых браузерах контент все равно должен быть обрезан).

<table style="table-layout:fixed;width:50px;">
    <tr>
     <td style='width:50px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;'>Long string of text with nice ellipses effect.</td>         
    </tr>
</table>

В этой скрипке есть все техники, которые я только что описал: http://jsfiddle.net/Aa4JL/4/

Answer 2

Вы можете использовать переполнение текста. Этот является примером использования text-overflow:ellipsis. Я создал пример для jsfiddle , просто скопировав код из указанного примера.

Answer 3

Кажется, что это работает, если вы оберните содержимое td в div:

Демо: http://jsfiddle.net/LUmNc/

Answer 4

я думаю, что вы не можете сделать это .. HTML определяет только базовый размер ячейки, что означает, какой размер будет ячейка, если у вас нет текста. если ваш текст больше, чем ячейка, он не остановит его.

лучший способ сделать то, что вы пытаетесь сделать, это использовать php и функцию substring () ..

дайте мне знать, если это поможет или вам нужна помощь с этим

Answer 5

<style type="text/css">
td {
    overflow-x: hidden;

}
</style>

Answer 6

атрибуты html также должны быть определены в двойных кавычках, таких как

echo "<td style=\"height:10px; width:10px;\">";