para - tablas en html ejemplos

HTML CSS Cómo evitar que una celda de la tabla se expanda

Question

Tengo una tabla que está construida con los contenidos procedentes 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). Yo he tratado:

<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

Es completamente posible si su código tiene suficiente lógica relativa para trabajar.

Simplemente use las unidades de vista, aunque para algunos las matemáticas pueden ser un poco más complicadas. Usé esto para evitar que los elementos de la lista hinchen ciertas columnas de la tabla con texto mucho más largo.

ol {max-width: 10vw; padding: 0; overflow: hidden;}

Aparentemente max-width en los elementos de colgroup no funciona, lo cual es bastante cojo para depender totalmente de los elementos secundarios para controlar algo en el elemento primario.

Answer 2

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

td {
    word-wrap: break-word;
}

Answer 3

No puede controlar el ancho de una celda de tabla ( td ) a menos que envuelva 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 ajustará el contenido de cada elemento td dentro de una etiqueta div . El ancho de la etiqueta div se establecerá en el ancho del elemento th correspondiente.

Estructura de la tabla de muestra:

<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

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>

Nuevo HTML

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

Clase de CSS:

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

Answer 5

Sin javascript, solo CSS. ¡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 6

<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 pruébalo, funciona.

también puede querer agregar esto:

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

Por supuesto, pondría esto en una hoja de estilo vinculada separada, y no en línea ... ¿no lo haría?)