Wymusza stałe ustalanie szerokości kolumn tabeli, niezależnie od zawartości

Mam tabelę html z table-layout: fixedi td o ustawionej szerokości. Kolumna nadal się rozwija, aby pomieścić zawartość tekstu, który nie zawiera spacji. Czy istnieje sposób na rozwiązanie tego problemu inny 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 się, mimo że jest jawnie ustawiona na szerokość 50 pikseli.

Określ szerokość stołu:

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

Zobacz jsFiddle

Spróbuj zajrzeć do następującego kodu CSS:

word-wrap:break-word;

Przeglądarki internetowe nie powinny domyślnie rozdzielać „słów”, więc doświadczasz normalnego zachowania przeglądarki. Jednak możesz to zmienić za pomocą dyrektywy CSS zawijania słów.

Trzeba by ustawić szerokość całej tabeli, a następnie szerokość kolumn. "szerokość: 100%;" powinno być również OK, w zależności od twoich wymagań.

Korzystanie z zawijania wyrazów może nie być tym, czego chcesz, ale jest przydatne do wyświetlania wszystkich danych bez deformowania układu.

Spraw, aby stół był solidny PRZED CSS. Określ szerokość tabeli, a następnie użyj wiersza „kontrolującego”, w którym każdy td ma określoną szerokość, z których wszystkie sumują się do szerokości w znaczniku tabeli.

Konieczność wykonywania setek e-maili w formacie html, aby pracować wszędzie, używając najpierw poprawnego HTML, a następnie stylizacji w / css obejdzie wiele problemów we wszystkich IE, webkitach i mozillach.

więc:

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

Utrzyma stół o szerokości 300 pikseli. Oglądaj obrazy, które są większe niż szerokość przez skrajności

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

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

Następnie plik css.

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

Możesz także pracować z opcjami „overflow: hidden” lub „overflow-x: hidden” (tylko dla szerokości). Wymaga to określonej szerokości (i / lub wysokości?) I być może także „display: block”.

„Przepełnienie: ukryte” ukrywa całą zawartość, która nie mieści się w zdefiniowanym polu.

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; }

EDYCJA: Wstyd mi, widziałem, już używasz "przepełnienia". Myślę, że to nie działa, ponieważ nie ustawiasz "display: block" na swój element ...

Spróbowałbym ustawić go na max-width: 50px;

Możesz także użyć wartości procentowych i / lub określić w nagłówkach kolumn:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

Premia z procentami to mniejsza konserwacja kodu: możesz zmienić szerokość swojej tabeli bez konieczności ponownego określania szerokości kolumn.

Uwaga: Rozumiem, że szerokość tabeli określona w pikselach nie jest obsługiwana w HTML 5; zamiast tego musisz użyć CSS.

To działa dla mnie

td::after { 
content: ''; 
display: block; 
width: 30px;
}