HTML CSS Come interrompere una cella di tabella dall'espansione

Question

Ho una tabella che è costruita con il contenuto proveniente da un set di dati restituito. Quello che voglio fare è fermare una cella 'description' dall'espansione di oltre 280px, indipendentemente dalla lunghezza del contenuto (la sua stringa s). Ho provato:

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

Ma questo non sembra funzionare. Non voglio che vada a capo, né voglio mostrare qualcosa oltre 280px.

Answer 1

Sembra che la sintassi HTML non sia corretta per la cella della tabella. Prima di provare l'altra idea qui sotto, conferma se funziona o meno ... Puoi anche provare ad aggiungerlo al tuo stesso tavolo: layout di tabella: fisso ...

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

Nuovo HTML Classe

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

CSS:

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

Lo so che è vecchia scuola, ma indica che una prova, funziona.

consiglia inoltre di aggiungere questo:

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

Naturalmente, devi mettere questo in un foglio di stile collegato a parte, e non inline ... non è vero;)

Answer 3

Puoi controllare la larghezza di una cella di tabella (td) a meno che non si avvolga il suo contenuto all'interno di un controllo contenitore come div. La seguente funzione jQuery avvolgerà il contenuto di ogni td all'interno di 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); 
    }); 
} 

Questa funzione avvolgere il contenuto di ogni elemento td all'interno di un tag div. La larghezza del tag div verrà impostata sulla larghezza dell'elemento th corrispondente. struttura della tabella

Esempio:

<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. Funziona bene!

.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

Questo potrebbe essere utile, come la risposta di cui sopra è solo css:

td { 
    word-wrap: break-word; 
}