Змусити ширину стовпців таблиці завжди фіксувати незалежно від вмісту

У мене є HTML-таблиця з table-layout: fixedі td із заданою шириною. Стовпець все ще розширюється, щоб вмістити вміст тексту, який не містить пробілу. Чи є спосіб виправити це крім обгортання вмісту кожного td у div?

Приклад: 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;
}

У цьому прикладі ви можете бачити, що стовпець з AAAAAAAAAAAA ... розширюється, незважаючи на те, що він явно встановлений у ширину 50 пікселів.

Вкажіть ширину таблиці:

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

Див. JsFiddle

Спробуйте переглянути наступний CSS:

word-wrap:break-word;

Веб-браузери не повинні розбивати "слова" за замовчуванням, тому те, що ви відчуваєте, є нормальною поведінкою браузера. Однак ви можете перевизначити це за допомогою директиви CSS із переносом слів.

Вам потрібно буде встановити ширину для загальної таблиці, а потім ширину для стовпців. "ширина: 100%;" також має бути в порядку, залежно від ваших вимог.

Використання переносу слів може бути не тим, що ви хочете, проте корисно для показу всіх даних без деформації макета.

Зробіть стіл твердим до ДО css. Визначте свою ширину таблиці, а потім використовуйте рядок 'control', згідно з яким кожен td має явну ширину, яка дорівнює ширині в тезі таблиці.

Потрібно робити сотні електронних листів у форматі HTML, щоб працювати скрізь, спочатку використовуючи правильний HTML, а потім стилі w / css допоможуть вирішити багато проблем у всіх IE, webkit та mozillas.

тому:

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

Триматиме стіл шириною 300 пікселів. Переглядайте зображення, які більші за ширину на крайнощі

Ви можете додати divдо td, то стиль цього. Це має працювати так, як ви очікували.

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

Тоді css.

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

Ви також можете працювати з "overflow: hidden" або "overflow-x: hidden" (лише для ширини). Для цього потрібна визначена ширина (та / або висота?) І, можливо, також "display: block".

"Переповнення: приховане" приховує весь вміст, який не вміщується у визначеному полі.

Приклад:

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: Ганьба мені, я бачив, ви вже використовуєте "переповнення". Я думаю, це не працює, тому що ви не встановлюєте "display: block" для вашого елемента ...

Я спробував би встановити його на max-width: 50px;

Ви також можете використовувати відсотки та / або вказати в заголовках стовпців:

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

Бонусом з відсотками є нижчий рівень обслуговування коду: ви можете змінити ширину таблиці без необхідності повторного вказівки ширини стовпців.

Застереження: Я розумію, що ширина таблиці, вказана в пікселях, не підтримується в HTML 5; вам потрібно використовувати CSS замість цього.

Це працює для мене

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