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

У меня есть таблица 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. Определите свою ширину таблицы, а затем используйте «управляющую» строку, в которой каждый td имеет явную ширину, и все это в сумме составляет ширину в теге таблицы.

Необходимость создавать сотни HTML-писем для работы везде, используя сначала правильный HTML, а затем стили с 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; }

РЕДАКТИРОВАТЬ: Позор мне, я видел, вы уже используете «переполнение». Я думаю, это не сработает, потому что вы не устанавливаете "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;
}