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

<p>многие люди до сих пор используют таблицы для разметки элементов управления, данных и т.д. - одним из примеров этого является популярная jqgrid. тем не менее, происходит какое-то волшебство, которое я не могу понять (его таблицы для громкого крика, сколько магии может быть?)</p><p>как можно установить ширину столбца таблицы и подчиниться ей так, как это делает jqgrid !? если я попытаюсь повторить это, даже если я установлю каждый <code><td style='width: 20px'></code>, как только содержимое одной из этих ячеек станет больше 20 пикселей, ячейка расширится!</p><p>есть идеи или идеи?</p>

<p>вы можете попытаться использовать тег <code><col></code> для управления стилем таблицы для всех строк, но вам нужно будет установить стиль <code>table-layout:fixed</code> для класса <code><table></code> или таблицы css и установить стиль <code>overflow</code> для ячеек.</p><p> <a href="https://developer.mozilla.org/en-us/docs/web/html/element/col">https://developer.mozilla.org/en-us/docs/web/html/element/col</a> </p><pre><code><table class="fixed"> <col width="20px" /> <col width="30px" /> <col width="40px" /> <tr> <td>text</td> <td>text</td> <td>text</td> </tr> </table> </code></pre><p>и это будет ваш css</p><pre><code>table.fixed { table-layout:fixed; } table.fixed td { overflow: hidden; } </code></pre>

<p>теперь в html5/css3 у нас есть лучшее решение проблемы. на мой взгляд, это чисто css решение рекомендуется:</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>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.*/</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><table class="fixed"> <tr> <td>veryverylongtext</td> <td>actuallythistextismuchlongeeeeeer</td> <td>we should use spaces tooooooooooooo</td> </tr> </table></code></pre></div> </div><p>вам нужно установить <code>width</code> таблицы даже в <a href="https://stackoverflow.com/a/4185874">решение haunter</a> . иначе это не сработает.<br> также предлагается новая функция css3, которая <a href="https://stackoverflow.com/users/104380/vsync">vsync</a> : <code>word-break:break-all;</code>. это также разбивает слова без пробелов на несколько строк. просто измените код следующим образом:</p><pre><code>table.fixed { table-layout:fixed; width:90px; word-break:break-all;} </code></pre><h2>конечный результат</h2><p><img src="https://i.stack.imgur.com/ju8ze.png" alt="rendered table"></p>

<pre><code>table td { table-layout:fixed; width:20px; overflow:hidden; word-wrap:break-word; } </code></pre>

<p>у меня была одна длинная таблица ячеек td, это вынудило стол к краям браузера и выглядело ужасно. я просто хотел, чтобы этот столбец был только фиксированного размера и разбивал слова, когда он достигал указанной ширины. так что это хорошо сработало для меня:</p><pre><code><td><div style='width: 150px;'>text to break here</div></td> </code></pre><p>вам не нужно указывать какой-либо стиль таблицы, tr элементов. вы также можете использовать переполнение: скрытый; как предлагают другие ответы, но это приводит к исчезновению лишнего текста.</p>

<pre><code>table { table-layout:fixed; width:200px; } table tr { height: 20px; } </code></pre><p>10х10</p>