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

У меня есть HTML-таблица с table-layout: fixed и тд с заданной шириной. Столбец по-прежнему расширяется, чтобы содержать содержимое текста без пробела. Есть ли способ исправить это, кроме как оборачивать содержимое каждого тд в 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 пикселей.

65 голосов | спросил datadamnation 28 MaramThu, 28 Mar 2013 00:18:03 +04002013-03-28T00:18:03+04:0012 2013, 00:18:03

6 ответов


0

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

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

См. jsFiddle

ответил Arie Xiao 28 MaramThu, 28 Mar 2013 00:26:41 +04002013-03-28T00:26:41+04:0012 2013, 00:26:41
0

Попробуйте заглянуть в следующий CSS:

word-wrap:break-word;

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

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

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

ответил Drew Anderson 28 MaramThu, 28 Mar 2013 00:22:39 +04002013-03-28T00:22:39+04:0012 2013, 00:22:39
0

Сделайте стол твердым, прежде чем CSS. Определите ширину таблицы, затем используйте «управляющую» строку, в которой каждый тд имеет явную ширину, и все они в сумме составляют ширину в теге таблицы.

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

ответил kelly johnson 28 MaramThu, 28 Mar 2013 00:20:46 +04002013-03-28T00:20:46+04:0012 2013, 00:20:46
0

Вы можете добавить div в td

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

Тогда css.

td div { width: 50px; overflow: hidden; }
ответил John Fisher 28 MaramThu, 28 Mar 2013 00:26:06 +04002013-03-28T00:26:06+04:0012 2013, 00:26:06
0

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

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

РЕДАКТИРОВАТЬ: позор мне, я видел, вы уже используете "переполнение". Я думаю, это не работает, потому что вы не устанавливаете «display: block» для вашего элемента ...

ответил Stefan Brendle 28 MaramThu, 28 Mar 2013 00:28:33 +04002013-03-28T00:28:33+04:0012 2013, 00:28:33
0

Я бы попробовал установить максимальную ширину: 50px;

ответил Alex 28 MaramThu, 28 Mar 2013 00:20:40 +04002013-03-28T00:20:40+04:0012 2013, 00:20:40

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132