У меня есть ячейка таблицы, в которой я всегда хотел бы быть определенной шириной. Однако он не работает с большими строками несложенного текста. Здесь тестовый пример:
td {
border: solid green 1px;
width: 200px;
overflow: hidden;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>Вот та же проблема.
Вам нужно установить table-layout:fixed и подходящую ширину для элемента таблицы, а также overflow:hidden и white-space: nowrap в ячейках таблицы.
Ширина таблицы должна быть одинаковой (или меньше), чем ячейка фиксированной ширины.
С одним столбцом с фиксированной шириной:
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
max-width: 100px;
}
td {
background: #F00;
padding: 20px;
overflow: hidden;
white-space: nowrap;
width: 100px;
border: solid 1px #000;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>Это как раз TD. Я полагаю, что это может быть потому, что свойство "display" для элемента "TD" по сути установлено "table-cell", а не "block".
В вашем случае альтернативой может быть обернуть содержимое TD в DIV и применить ширину и переполнение к DIV.
<td style="border: solid green 1px; width:200px;">
<div style="width:200px; overflow:hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
</td>
Возможно, возникли проблемы с заполнением или сотовой сетью, и вам лучше удалить встроенные стили и использовать внешний css вместо этого, но это должно быть начало.
Примените CSS table-layout:fixed; (а иногда и width:<any px or %>) к стилю TABLE и white-space: nowrap; overflow: hidden; в TD. Затем установите ширину CSS для правильных элементов ячейки или столбца.
Значительно, ширина столбцов таблицы фиксированного макета определяется шириной ячеек в первой строке таблицы. Если в первой строке есть TH-элементы, а ширины применяются к TD (а не TH), тогда ширина применяется только к содержимому TD (белое пространство и переполнение могут игнорироваться); столбцы таблицы будут распределяться равномерно, независимо от установленной ширины TD (поскольку в первой строке не указаны ширины [на TH в первой строке]), а столбцы будут иметь [расчетную] равную ширину; таблица не будет пересчитывать ширину столбца на основе ширины TD в последующих строках. Установите ширину для первых элементов ячейки, с которыми стол столкнутся.
В качестве альтернативы самым безопасным способом установки ширины столбцов является использование тегов <COLGROUP> и <COL> в таблице с шириной CSS, установленной на каждой фиксированной ширине COL. CSS, связанный с шириной ячейки, лучше, когда таблица знает ширину столбца заранее.
Я не знаком с конкретной проблемой, но вы можете вставить div и т.д. внутри td и установить переполнение.
Ну вот решение для вас, но я не понимаю, почему он работает:
<html><body>
<div style="width: 200px; border: 1px solid red;">Test</div>
<div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels. These pretzels are making me thirsty.</div>
<div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
<table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
<td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div></td>
</tr></table>
</body></html>
А именно, обертывание содержимого ячейки в div.
Вам нужно будет установить атрибуты стиля таблицы: width и table-layout: fixed;, чтобы "переполнение: скрыто"; атрибут работает правильно.
Imo это работает лучше, чем использование div с атрибутом style width, особенно при использовании для динамических вычислений изменения размера, таблица будет иметь более простой DOM, который упрощает манипуляции, потому что исправления для заполнения и поля не требуются
В дополнение, вам не нужно устанавливать ширину для всех ячеек, но только для ячеек в первой строке.
Вот так:
<table style="width:0px;table-layout:fixed">
<tr>
<td style="width:60px;">
Id
</td>
<td style="width:100px;">
Name
</td>
<td style="width:160px;overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
<tr>
<td style="">
Id
</td>
<td style="">
Name
</td>
<td style="overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
</table>
Лучшее решение - поместить div в ячейку таблицы с нулевой шириной. Ячейки таблицы тел наследуют их ширину от ширины, определяемой thead. Позиция: относительная и отрицательная маржа должны делать трюк!
Вот скриншот: https://flic.kr/p/nvRs4j
<body>
<!-- SOME CSS -->
<style>
.cropped-table-cells,
.cropped-table-cells tr td {
margin:0px;
padding:0px;
border-collapse:collapse;
}
.cropped-table-cells tr td {
border:1px solid lightgray;
padding:3px 5px 3px 5px;
}
.no-overflow {
display:inline-block;
white-space:nowrap;
position:relative; /* must be relative */
width:100%; /* fit to table cell width */
margin-right:-1000px; /* technically this is a less than zero width object */
overflow:hidden;
}
</style>
<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
<thead>
<tr>
<td style="width:100px;" width="100"><span>ORDER<span></td>
<td style="width:100px;" width="100"><span>NAME<span></td>
<td style="width:200px;" width="200"><span>EMAIL</span></td>
</tr>
</thead>
<tbody>
<tr>
<td><span class="no-overflow">123</span></td>
<td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
<td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
</tbody>
</table>
</body>
У меня была аналогичная проблема, и мне сначала пришлось использовать <div> внутри <td> (решение John MacIntyre не работало для меня по разным причинам).
Примечание, хотя <td><div>...</div></td> не является допустимым местом размещения для div, поэтому вместо этого я использую набор <span> с display:block;. Теперь он корректно проверяет и работает.
чтобы сделать более простым Я предлагаю разместить текстовое поле внутри td который автоматически управляет переполнением
<td><textarea autofocus>$post_title</textarea></td>
должен быть улучшен
<style>
.col {display:table-cell;max-width:50px;width:50px;overflow:hidden;}
</style>
<table>
<tr>
<td class="col">123456789123456789</td>
</tr>
</table>
отображает 123456
Самое простое и простое решение, которое работает:
table { table-layout: fixed }
table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}