Использовать ширину столбцов таблицы, чтобы всегда фиксироваться независимо от содержимого

У меня есть 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 пикселей шириной.

Ответы

Ответ 1

Укажите ширину таблицы:

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

См. jsFiddle

Ответ 2

Попробуйте изучить следующий CSS:

word-wrap:break-word;

Веб-браузеры не должны разрывать "слова" по умолчанию, поэтому то, что вы испытываете, - это обычное поведение браузера. Однако вы можете переопределить это с помощью директивы CSS word-wrap.

Вам нужно будет установить ширину в общей таблице, а затем ширину столбцов. "Ширина: 100%;" также должно быть в порядке в зависимости от ваших требований.

Использование word-wrap может быть не таким, каким вы хотите, но полезно для отображения всех данных без деформации макета.

Ответ 3

Сделайте стол твердым до тех пор, пока 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 пикселей. Наблюдайте за изображениями, превышающими ширину по ширине

Ответ 4

Вы можете добавить div в td, а затем стиль. Он должен работать так, как вы ожидали.

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

Тогда css.

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

Ответ 5

Вы также можете работать с "overflow: hidden" или "overflow-x: hidden" (только для ширины). Для этого требуется определенная ширина (и/или высота?) И, возможно, "дисплей: блок".

"Overflow: Hidden" скрывает весь контент, который не помещается в определенное поле.

Пример:

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" в свой элемент...

Ответ 6

Я бы попытался установить его на max-width: 50px;

Ответ 7

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

<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 вместо этого.

Ответ 8

Это работает для меня

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