Szerokość kolumn tabeli siły zawsze jest ustalana niezależnie od zawartości

Question

Mam tabelę html z table-layout: fixed i td o ustawionej szerokości. Kolumna nadal się rozwija, aby pomieścić zawartość tekstu, która nie zawiera spacji. Czy istnieje sposób naprawić to inne niż zawijanie zawartości każdego td w div?

Przykład: http://jsfiddle.net/6p9K3/29/

<table> 
    <tbody> 
     <tr> 
      <td style="width: 50px;">Test</td> 
      <td>Testing 1123455</td> 
     </tr><tr> 
      <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> 
      <td>B</td> 
     </tr> 
    </tbody> 
</table> 

table 
{ 
    table-layout: fixed; 
} 

td 
{ 
    border: 1px solid green; 
    overflow: hidden; 
} 

W tym przykładzie widać, że kolumna z aaaaaaaaaaaa ... rozszerza mimo jawnie ustawiona na 50 pikseli szerokości.

Answer 1

określić szerokość stołu:

table 
{ 
    table-layout: fixed; 
    width: 100px; 
} 

Zobacz jsFiddle

Answer 2

Chciałbym ustawić go na maksymalną szerokość: 50 pikseli;

Answer 3

Stwórz stół solidnie PRZED css. Określ szerokość tabeli, a następnie użyj wiersza "kontrolującego", w którym każdy td ma jawną szerokość, z których wszystkie sumują się do szerokości w tagu tabeli.

Będąc zmuszonym do wysyłania setek e-maili html do pracy wszędzie, z użyciem właściwego HTMLa, stylizacja w/css obejmie wiele problemów we wszystkich IE, webkitach i mozillach.

tak:

<table width="300" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="50"></td> 
    <td width="100"></td> 
    <td width="150"></td> 
    </tr> 
    <tr> 
    <td>your stuff</td> 
    <td>your stuff</td> 
    <td>your stuff</td> 
    </tr> 
</table> 

zachowa stolik na rozmiar to 300 szerokości. Oglądać obrazy, które są większe niż szerokość przez skrajności

Answer 4

zajrzyj do następującego CSS:

word-wrap:break-word; 

przeglądarek internetowych nie powinno break-up „słowa” Domyślnie więc to, czego doświadczamy, jest normalne zachowanie przeglądarka. Można to jednak zastąpić dyrektywą CSS z zawijaniem wyrazów.

Należy ustawić szerokość na całej tabeli, a następnie szerokość na kolumnach. "width: 100%;" powinno być również OK w zależności od Twoich wymagań.

Używanie zawijanego tekstu może nie być tym, czego potrzebujesz, jednak przydatne jest wyświetlanie wszystkich danych bez zniekształcania układu.

Answer 5

Możesz dodać div do td, a następnie nadać mu styl. Powinno działać zgodnie z oczekiwaniami.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td> 

Następnie css.

td div { width: 50px; overflow: hidden; } 

Answer 6

Można również pracować z "overflow: hidden" lub "overflow-x: hidden" (tylko dla szerokości). Wymaga to zdefiniowanej szerokości (i/lub wysokości?) I może również "display: block".

"Overflow: Hidden" ukrywa całą zawartość, która nie pasuje do zdefiniowanego okna.

Przykład:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1"> 
    <tr> 
     <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
     <td>bbb</td> 
     <td>cccc</td> 
    </tr> 
</table> 

CSS:

td div { width: 100px; overflow-y: hidden; } 

EDIT: Wstyd mi, widziałem, to inni gotowe "przepełnienie". Myślę, że to nie działa, ponieważ nie ustawiasz "display: block" na swoim elemencie ...