HTML CSS Comment arrêter l'expansion d'une cellule de table

Question

J'ai une table qui est construite avec le contenu provenant d'un jeu de données retourné. Ce que je veux faire est d'arrêter une cellule 'description' de s'étendre sur 280px de large, quelle que soit la longueur du contenu (sa chaîne de caractères). J'ai essayé:

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

Mais cela ne semble pas fonctionner. Je ne veux pas qu'il soit emballé, et je ne veux pas que quelque chose de plus de 280px soit affiché.

Answer 1

Il semble que votre syntaxe HTML est incorrecte pour la cellule de tableau. Avant d'essayer l'autre idée ci-dessous, confirmez si cela fonctionne ou non ... Vous pouvez également essayer d'ajouter ceci à votre table elle-même: table-layout: fixed ...

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

Nouveau HTML

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

CSS Classe:

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

Je sais qu'il est vieille école, mais donner que l'essayer, cela fonctionne.

peut également ajouter ceci:

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

Bien sûr, vous mettriez cela dans une feuille de style liée séparé, et non inline ... pas vous;)

Answer 3

Vous pouvez Ne contrôlez pas la largeur d'une cellule de table (td) à moins d'envelopper son contenu dans un contrôle de conteneur tel que div. La fonction jQuery suivante encapsulera le contenu de chaque td dans 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); 
    }); 
} 

Cette fonction envelopper le contenu de chaque élément td dans une balise div. La largeur de l'étiquette div sera définie sur la largeur de l'élément th correspondant.

structure de la table Exemple:

<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

Pas de javascript, CSS juste. Fonctionne 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

Cela pourrait être utile, comme la réponse ci-dessus est juste css:

td { 
    word-wrap: break-word; 
}