HTML CSS Cómo detener una celda de la tabla para que no se expanda

Question

Tengo una tabla que se compila con los contenidos que provienen de un conjunto de datos devuelto. Lo que quiero hacer es impedir que una celda de 'descripción' se expanda a más de 280 píxeles de ancho, sin importar la longitud del contenido (su cadena). Lo he intentado:

<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" > 

Pero esto no parece funcionar. No quiero que se envuelva, ni quiero que se muestre nada superior a 280 px.

Answer 1

Parece que su sintaxis HTML es incorrecta para la celda de la tabla. Antes de probar la otra idea a continuación, confirme si esto funciona o no ... También puede intentar agregar esto a su tabla en sí: layout de la tabla: arreglado ....

<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;"> 
    [content] 
</td> 

Nueva HTML

<td> 
    <div class="MyClass""> 
     [content] 
    </div> 
</td> 

CSS Clase:

.MyClass{ 
    height: 280px; 
    width: 456px; 
    overflow: hidden; 
    white-space: nowrap; 
} 

Answer 2

<table border="1" width="183" style='table-layout:fixed'> 
    <col width="67"> 
    <col width="75"> 
    <col width="41"> 
    <tr> 
    <td>First Column</td> 
    <td>Second Column</td> 
    <td>Third Column</td> 
    </tr> 
    <tr> 
    <td>Row 1</td> 
    <td>Text</td> 
    <td align="right">1</td> 
    </tr> 
    <tr> 
    <td>Row 2</td> 
    <td>Abcdefg</td> 
    <td align="right">123</td> 
    </tr> 
    <tr> 
    <td>Row 3</td> 
    <td>Abcdefghijklmnop</td> 
    <td align="right">123456</td> 
    </tr> 
</table> 

Sé que es de la vieja escuela, pero Inténtelo, funciona.

puede también querer añadir lo siguiente:

<style> 
    td {overflow:hidden;} 
</style> 

Por supuesto, que había puesto esto en una hoja de estilo vinculada por separado, y no coloca en línea ... ¿no es así;)

Answer 3

Puede No puede controlar el ancho de una celda de tabla (td) a menos que ajuste su contenido dentro de un control de contenedor como div. La siguiente función jQuery ajustará el contenido de cada td dentro de un div.

function WrapTableCellsWithDiv(tableId) 
{ 
    $('#' + tableId + ' tbody tr td').each(function() 
    { 
     //get corresponding th of this td 
     var tdIndex = $(this).index(); 
     var th = $('#' + tableId + ' thead tr th:nth-child(' + (tdIndex + 1) + ')'); 
     var thWidth = $(th).width(); 

     //wrap the contents of td inside a div 
     var tdContents = $(this).html(); 
     var divTag = '<div style="width: ' + thWidth + '">' + tdContents + '</div>'; 
     $(this).html(divTag); 
    }); 
} 

Esta función envolver el contenido de cada elemento de td dentro de una etiqueta div. El ancho de la etiqueta div se establecerá en el ancho del elemento th correspondiente.

Muestra estructura de la tabla:

<table id="SampleTable"> 
    <thead> 
     <tr> 
      <th style="width: 90px;">FirstName</th> 
      <th style="width: 90px;">LastName</th> 
      <th style="width: 60px;">Age</th> 
      <th style="width: 70px;">Gender</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John</td> 
      <td>Smith</td> 
      <td>25</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Ted</td> 
      <td>Eddie</td> 
      <td>22</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Angel</td> 
      <td>Mike</td> 
      <td>23</td> 
      <td>Female</td> 
     </tr> 
    </tbody> 
</table> 

Answer 4

No JavaScript, CSS solo. ¡Funciona bien!

.no-break-out { 
     /* These are technically the same, but use both */ 
     overflow-wrap: break-word; 
     word-wrap: break-word; 

     -ms-word-break: break-all; 
     /* This is the dangerous one in WebKit, as it breaks things wherever */ 
     word-break: break-all; 
     /* Instead use this non-standard one: */ 
     word-break: break-word; 

     /* Adds a hyphen where the word breaks, if supported (No Blink) */ 
     -ms-hyphens: auto; 
     -moz-hyphens: auto; 
     -webkit-hyphens: auto; 
     hyphens: auto; 

    } 

Answer 5

Esto podría ser útil, ya que la respuesta anterior es sólo css:

td { 
    word-wrap: break-word; 
}