HTML CSS Jak zatrzymać komórkę tabeli przed rozwinięciem

Question

Mam tabelę, która jest zbudowana z zawartości pochodzącej z zwróconego zestawu danych. Co chcę zrobić, to zatrzymać rozwijanie komórki "opisowej" o szerokości ponad 280 pikseli, bez względu na długość zawartości (ciąg znaków). Próbowałem:

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

Ale to nie działa. Nie chcę tego owijać, ani nie chcę, żeby cokolwiek ponad 280 pikseli było wyświetlane.

Answer 1

Wygląda na to, że składnia HTML jest niepoprawna dla komórki tabeli. Zanim wypróbujesz inny pomysł poniżej, sprawdź, czy to działa, czy nie ... Możesz również spróbować dodać to do swojej tabeli: table-layout: fixed ....

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

Nowy HTML

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

CSS Klasa:

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

wiem, że to stara szkoła, ale dać to spróbować, to działa.

może również dodać to:

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

Oczywiście, można by umieścić to w oddzielnym połączonego arkusza stylów, a nie inline ... prawda;)

Answer 3

Można nie kontroluje szerokości komórki tabeli (td), chyba że zawiniesz jej zawartość wewnątrz kontrolki kontenera, takiej jak div. Następująca funkcja jQuery zawinie zawartość każdego td wewnątrz elementu 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); 
    }); 
} 

Funkcja zawinie zawartość każdego elementu td wewnątrz div tag. Szerokość znacznika div zostanie ustawiona na szerokość odpowiedniego elementu th.

Przykładowa struktura stół:

<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, tylko CSS. Działa w porządku!

.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

Może to być przydatne, jak wyżej, odpowiedź jest tylko css:

td { 
    word-wrap: break-word; 
}