Як змусити обгортати вміст комірок таблиці <td>?

146

Ось вся сторінка * wrappable визначена у файлі main.css

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}

Ось вся сторінка:

<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">



    <ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
        <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}" />
        <table class="data_table vert_scroll_table">



            </tr>
            <tr>
                <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
            </tr>


            <c:forEach var="comments" items="${entry.comments}">


                <tr id="id${comments.id}">
                    <td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
                </tr>



            </c:forEach>
            <c:if test="${lock.locked || form.entryId < 0 }">
                <%-- This is the row for adding a new comment. --%>
                    <tr id="commentRow">
                        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
                            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

Він просто розтягується щоразу, коли я подаю.
Ця сторінка також знаходиться в розділі також. Чи потрібно мені також встановити ширину діва та таблиці?

html css html-table

— Doc Holiday
джерело

1

Де ти визначаєш wrappable?

— canon

2

Де .wrappableвизначено клас? який браузер ви використовуєте?

— Дани

Браузер, який використовується, особливо важливий - старі версії IE не підтримують max-width. Є багато інших речей, які можуть бути проблемою, і неможливо сказати без додаткової інформації, але це те, що можна зламати.

— Кріс Морган

Я в основному просто намагаюся тримати поданий текст, щоб він не знаходився в ширині, а не розтягував таблицю після того, як я надішлю її

— Doc Holiday

Це може допомогти stackoverflow.com/a/26560829/1924979

— Суворі Vakharia

292

Використовуйте table-layout:fixedв таблиці та word-wrap:break-wordв тд.

Дивіться цей приклад:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>

Розгорніть фрагмент

— jim31415
джерело

Ви повинні додати межу-крапку: біт згортання до верхньої частини вашої відповіді, щоб люди, які візуально сканують вашу відповідь, змогли швидко отримати повну відповідь.

— dwoodwardgb

для трохи більшої таблиці модифікацій {border-collaption: згортання; макет таблиці: фіксований; перенесення слів: перерва-слово;} таблиця td {ширина: 100px; перенесення слів: перерва-слово;}

— Кулдейп Кумар

44

Це працює для мене.

<style type="text/css">

 td {

    /* css-3 */
    white-space: -o-pre-wrap; 
    word-wrap: break-word;
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 

}

А атрибут таблиці такий:

table { 
  table-layout: fixed;
  width: 100%
}

— Lavekush Agrawal
джерело

15

td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}

— Джафстар
джерело

6

можливо, ви можете пояснити код, щоб це було зрозуміло кожному

— Федеріко

він показує акуратну таблицю, але вміст вирізається; тобто. не може побачити деякі слова, якщо його великий вміст. overflow:hidden

— wpcoder

Але жорстке кодування максимальної ширини не дуже добре. Він не буде масштабуватись також для великих роздільних можливостей і т. Д. Ви хочете дозволити таблиці відповідати правильним розміром.

— user959690

4

Якщо ви використовуєте таблицю, що реагує на Bootstrap, просто потрібно встановити максимальну ширину для одного конкретного стовпця і зробити обтікання тексту, завдяки чому стиль цього стовпця так само працює

max-width:someValue;
word-wrap:break-word

— Фен Хань
джерело

5

Зауважте, що max-widthмає бути pxзначення, а не%

— maxedison

3

Це працювало для мене, коли мені потрібно було відображати "гарненький" JSON у комірці:

td { white-space:pre }

Детальніше про `white-space`власність :

normal : Це значення спрямовує користувальницьких агентів на згортання послідовностей пробілів та розрив ліній у міру необхідності для заповнення рядків.

pre: Це значення не дозволяє користувачам-агентам згортати послідовності пробілів.
Рядки розбиваються лише на збережених символах нового рядка.

nowrap: Це значення згортає пробіл як для normal, але пригнічує розриви рядків у тексті.

pre-wrap: Це значення не дозволяє користувачам-агентам згортати послідовності пробілів.
Рядки розбиваються на збережених символах нового рядка і за необхідності заповнюють рядки.

pre-line: Це значення спрямовує агентів користувача на згортання послідовностей пробілів.
Рядки розбиваються на збережених символах нового рядка і за необхідності заповнюють рядки.

(Також див. У джерелі .)

— ashleedawg
джерело

1

Просто додайте: word-break: break-word; до вас клас таблиці.

— Саджад Алжилезі
джерело

0

Якщо ви хочете виправити стовпчик, слід встановити ширину. Наприклад:

<td style="width:100px;">some data</td>

— Євген
джерело

1

Я спробував це ... він чомусь продовжує розширювати таблицю <td id = "коментарі - $ {comments.id}" class = "wrappable" style = "width: 100px"> $ {comments.comment} </ td >

— свято Doc

0

Це ще один спосіб вирішення проблеми, якщо у вас довгі рядки (наприклад, імена шляхів файлів) і ви хочете розбити рядки лише на певні символи (наприклад, косої риски). Ви можете вставити символи Unicode Zero Width Space просто перед (або після) косою рисою в HTML.

— Марк Лаката
джерело

0

.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

Я перевірив бінарні дані, і тут вона чудово працює.

— джайп
джерело

Як змусити обгортати вміст комірок таблиці <td>?

DEMO:

Детальніше про white-spaceвласність :

Детальніше про `white-space`власність :