Jak wymusić zawijanie zawartości komórki tabeli <td>?

146

Tutaj cała strona * opakowalna jest zdefiniowana w pliku 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;
}

Oto cała strona:

<%@ 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>

Po prostu rozciąga się za każdym razem, gdy się poddaję.
Ta strona również znajduje się wewnątrz elementu DIV. Czy muszę również ustawić szerokość elementu div i tabeli?

html css html-table Doc Holiday
źródło

1

Gdzie definiujesz wrappable?

kanon

2

Gdzie jest .wrappablezdefiniowana klasa? jakiej przeglądarki używasz?

Dani,

Używana przeglądarka jest szczególnie ważna - stare wersje IE nie obsługują max-width. Jest wiele innych rzeczy, które mogą być problemem i nie można tego powiedzieć bez większej ilości informacji, ale tę można zepsuć.

Chris Morgan,

Po prostu staram się po prostu zachować przesłany tekst, aby nie przekraczał szerokości i nie rozciągał tabeli po przesłaniu go

Doc Holiday

To może pomóc stackoverflow.com/a/26560829/1924979

Harsh Vakharia

292

Użyj table-layout:fixedw tabeli i word-wrap:break-wordw td.

Zobacz ten przykład:

<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>

PRÓBNY:

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>

Rozwiń fragment

jim31415
źródło

Powinieneś dodać border-collapse: collapse bit do górnej części odpowiedzi, aby osoby, które wizualnie skanowały twoją odpowiedź, mogły szybko uzyskać pełną odpowiedź.

dwoodwardgb

trochę więcej modyfikacji table {border-collapse: collapse; table-layout: fixed; word-wrap: break-word;} table td {width: 100px; word-wrap: break-word;}

Kuldeep Kumar

44

U mnie to działa.

<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; 

}

Atrybut tabeli to:

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

Lavekush Agrawal
źródło

15

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

Jafstar
źródło

6

może możesz wyjaśnić kod, aby był jasny dla każdego

Federico

pokazuje zgrabną tabelę, ale zawartość jest ograniczona; to znaczy. nie widzę słów, jeśli jest duża zawartość. overflow:hidden

wpcoder

Zakodowanie maksymalnej szerokości nie jest jednak dobre. Nie będzie skalować się tak dobrze do dużych rozdzielczości itp. Chcesz, aby stół odpowiadał poprawnie na rozmiar.

user959690

4

Jeśli używasz responsywnej tabeli Bootstrap, po prostu chcesz ustawić maksymalną szerokość dla jednej konkretnej kolumny i zawijać tekst, dzięki czemu styl tej kolumny również działa

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

Feng Han
źródło

5

Zauważ, że max-widthmusi to być pxwartość, a nie%

maxedison

3

To zadziałało, gdy musiałem wyświetlić „ładny” JSON w komórce:

td { white-space:pre }

Więcej o `white-space`nieruchomości :

normal : Ta wartość nakazuje agentom użytkownika zwijanie sekwencji białych znaków i łamanie linii w razie potrzeby w celu wypełnienia pól linii.

pre: Ta wartość zapobiega zwijaniu sekwencji białych znaków przez agenty użytkownika.
Linie są przerywane tylko w zachowanych znakach nowej linii.

nowrap: Ta wartość zwija białe normalznaki jak w przypadku , ale pomija podziały wierszy w tekście.

pre-wrap: Ta wartość zapobiega zwijaniu sekwencji białych znaków przez agenty użytkownika.
Wiersze są przerywane przy zachowanych znakach nowej linii oraz w razie potrzeby do wypełniania pól linii.

pre-line: Ta wartość nakazuje agentom użytkownika zwijanie sekwencji białych znaków.
Wiersze są przerywane przy zachowanych znakach nowej linii oraz w razie potrzeby do wypełniania pól linii.

(Zobacz też więcej u źródła ).

ashleedawg
źródło

1

Wystarczy dodać: word-break: break-word; do klasy tabeli.

Sajjad Aljileezi
źródło

0

Jeśli chcesz naprawić kolumnę, ustaw szerokość. Na przykład:

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

Eugene
źródło

1

Próbowałem ... Z jakiegoś powodu tabela ciągle się rozwija <td id = "comments - $ {comments.id}" class = "wrappable" style = "width: 100px"> $ {comments.comment} </ td >

Doc Holiday

0

Jest to inny sposób rozwiązania problemu, jeśli masz długie łańcuchy (takie jak nazwy ścieżek do plików) i chcesz przerwać tylko łańcuchy niektórych znaków (takich jak ukośniki). Możesz wstawiać znaki Unicode o zerowej szerokości tuż przed (lub po) ukośnikach w kodzie HTML.

Mark Lakata
źródło

0

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

Przetestowałem z danymi binarnymi i tutaj działa doskonale.

jaip
źródło

Jak wymusić zawijanie zawartości komórki tabeli <td>?

Odpowiedzi:

PRÓBNY:

Więcej o white-spacenieruchomości :

Więcej o `white-space`nieruchomości :