¿Cómo forzar el contenido de la celda de la tabla <td> para ajustar?

146

Aquí está toda la página * wrappable se define en un archivo 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;
}

Aquí está toda la página:

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

Simplemente se estira cada vez que envío.
Esta página también está dentro de un div. ¿Necesito establecer el ancho del div y la tabla también?

html  css  html-table 
— Doc vacaciones
fuente
1
¿Dónde estás definiendo wrappable?
— canon
2
¿Dónde se .wrappabledefine la clase? ¿Qué navegador estás usando?
— Dani
El navegador que se utiliza es especialmente importante: las versiones antiguas de IE no son compatibles max-width. Hay muchas otras cosas que podrían ser el problema y es imposible decirlo sin más información, pero esa es una que puede romperse.
— Chris Morgan
Im básicamente tratando de mantener el texto presentado a permanecer dentro de una anchura y no estirar la mesa después de que se sybmit
— Doc Holiday
Esto podría ayudar a stackoverflow.com/a/26560829/1924979
— Harsh Vakharia

Respuestas:

292

Uso table-layout:fixeden la tabla y word-wrap:break-worden el td.

Ver este ejemplo:

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

MANIFESTACIÓN:

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

— jim31415
fuente
Debe agregar el borde de colapso de borde: colapso a la parte superior de su respuesta para que las personas que escanean visualmente su respuesta puedan obtener la respuesta completa rápidamente.
— dwoodwardgb
para modificaciones un poco más tabla {border-collapse: collapse; table-layout: fixed; word-wrap: break-word;} table td {width: 100px; word-wrap: break-word;}
— Kuldeep Kumar
44

Funciona para mi.

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

}

Y el atributo de la tabla es:

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

— Lavekush Agrawal
fuente
15 
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
— Jafstar
fuente
66
tal vez puedas explicar el código para que quede claro para cualquiera
— Federico
muestra una tabla ordenada, pero el contenido se corta; es decir. No puedo ver algunas palabras si su gran contenido. overflow:hidden
— wpcoder
Sin embargo, codificar el ancho máximo no es bueno. No escalará tan bien a grandes resoluciones, etc. Desea permitir que la tabla responda correctamente al tamaño.
— user959690
4

Si está utilizando la tabla receptiva Bootstrap, solo desea establecer el ancho máximo para una columna en particular y hacer un ajuste de texto, haciendo que el estilo de esta columna de la siguiente manera también funcione

max-width:someValue;
word-wrap:break-word
— Feng Han
fuente
55
Tenga en cuenta que max-widthdebe ser un pxvalor, no%
— maxedison
3

Esto funcionó para mí cuando necesitaba mostrar JSON "bonito" en una celda:

td { white-space:pre }

Más sobre la white-spacepropiedad :

  • normal : Este valor dirige a los agentes de usuario a contraer secuencias de espacios en blanco y romper líneas según sea necesario para llenar cuadros de líneas.

  • pre: Este valor evita que los agentes de usuario colapsen secuencias de espacio en blanco.
    Las líneas solo se rompen en los caracteres de línea nueva conservados.

  • nowrap: Este valor contrae el espacio en blanco como para normal, pero suprime los saltos de línea dentro del texto.

  • pre-wrap: Este valor evita que los agentes de usuario colapsen secuencias de espacio en blanco.
    Las líneas se dividen en los caracteres de línea nueva conservados y, según sea necesario, para llenar los cuadros de línea.

  • pre-line: Este valor dirige a los agentes de usuario a colapsar secuencias de espacio en blanco.
    Las líneas se dividen en los caracteres de línea nueva conservados y, según sea necesario, para llenar los cuadros de línea.

(Además, vea más en la fuente ).

— ashleedawg
fuente
0

Si desea corregir la columna, debe establecer el ancho. Por ejemplo:

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

— Eugene
fuente
1
Lo intenté ... sigue expandiendo la tabla por alguna razón <td id = "comments - $ {comments.id}" class = "wrappable" style = "width: 100px"> $ {comments.comment} </ td >
— Doc Holiday
0

Esta es otra forma de abordar el problema si tiene cadenas largas (como nombres de ruta de archivo) y solo desea dividir las cadenas en ciertos caracteres (como barras). Puede insertar caracteres Unicode Zero Width Space justo antes (o después) de las barras en el HTML.

— Mark Lakata
fuente
0 
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

He probado con los datos binarios y está funcionando perfectamente aquí.

— jaip
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.