it-swarm.com.ru

Фиксированная ширина ячейки таблицы

Многие люди до сих пор используют таблицы для разметки элементов управления, данных и т.д. - одним из примеров этого является популярная jqGrid. Тем не менее, происходит какое-то волшебство, которое я не могу понять (его таблицы для громкого крика, сколько магии может быть?)

Как можно установить ширину столбца таблицы и подчиниться ей так, как это делает jqGrid !? Если я попытаюсь повторить это, даже если я установлю каждый <td style='width: 20px'>, как только содержимое одной из этих ячеек станет больше 20 пикселей, ячейка расширится!

Есть идеи или идеи?

156
Jimbo

Вы можете попытаться использовать тег <col> для управления стилем таблицы для всех строк, но вам нужно будет установить стиль table-layout:fixed для класса <table> или таблицы css и установить стиль overflow для ячеек.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

и это будет ваш CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
231
hunter

Теперь в HTML5/CSS3 у нас есть лучшее решение проблемы. На мой взгляд, это чисто CSS решение рекомендуется:

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

Вам нужно установить width таблицы даже в решение haunter . Иначе это не сработает.
Также предлагается новая функция CSS3, которая vsync : Word-break:break-all;. Это также разбивает слова без пробелов на несколько строк. Просто измените код следующим образом:

table.fixed { table-layout:fixed; width:90px; Word-break:break-all;}

Конечный результат

Rendered table

89
totymedli
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  Word-wrap:break-Word;
}
12
ajreal

У меня была одна длинная таблица ячеек td, это вынудило стол к краям браузера и выглядело ужасно. Я просто хотел, чтобы этот столбец был только фиксированного размера и разбивал слова, когда он достигал указанной ширины. Так что это хорошо сработало для меня:

<td><div style='width: 150px;'>Text to break here</div></td>

Вам не нужно указывать какой-либо стиль таблицы, tr элементов. Вы также можете использовать переполнение: скрытый; как предлагают другие ответы, но это приводит к исчезновению лишнего текста.

11
Tarik
table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10х10

0
user1993774