Таблица внутри div - содержимое td вызывает горизонтальное переполнение. Как я могу ограничить ширину? - PullRequest
Новая
       25

Таблица внутри div - содержимое td вызывает горизонтальное переполнение. Как я могу ограничить ширину?

3 голосов
/ 22 августа 2011

http://jsfiddle.net/HeMKY/8/

HTML 

<div id="wrapper">
    <table>
        <tr>
            <td class="left">left</td>
            <td class="right"><span>this text is right-floated</span></td>
        </tr>
        <tr>
            <td class="left">left</td>
            <td class="right"><img src="foo.gif" height="100" width="400" /></td>
        </tr>
        <tr>
            <td class="left">left</td>
            <td class="right">THISTEXTISWAYTOOLONGTHISTEXTISWAYTOOLONGTHISTEXTISWAYTOOLONG</td>
        </tr>
    </table>
</div>

CSS 

#wrapper
{
    max-width:300px;
    height:300px;
    background-color:gray;
    padding:5px;
}
td
{
    padding:5px;
}
td.left
{
    background-color:yellow;
}
td.right
{
    background-color:green;
}
td.right span
{
    float:right;
}

РЕЗУЛЬТАТ

overflow

ЧТО ХОЧУ

overflow is clipped

Обратите внимание, как изображения и текст могут вызвать переполнение. Кроме того, некоторый контент, который естественным образом подходит, перемещается вправо, поэтому я не могу просто сделать overflow:hidden, иначе естественным образом подходящий контент тоже будет скрыт. Мне также нужно разрешить .left растягиваться, чтобы соответствовать его содержимому, то есть содержимое там может иметь ширину от 10 до 150 пикселей, и я хочу, чтобы этот столбец был не шире своего самого широкого содержимого. Насколько я знаю, это невозможно без таблиц, поэтому я использую таблицу вместо table-layout:fixed или CSS grid framework.

Я надеялся, что какая-то комбинация width:100% или max-width:100%; на table или tr сработает, но я не могу заставить ее работать.

Ответы [ 3 ]

2 голосов
/ 22 августа 2011

Я бы посоветовал вам попробовать table-layout: fixed , как показано здесь (работает в ie6 +, firefox и & chrome)

В сочетании с определением width: 40px (или любым другим) для левой стороныстолбец и установка overflow-x: hidden в правом столбце, вы должны достичь желаемого эффекта.

2 голосов
/ 22 августа 2011

Вы можете добавить word-break:break-all; к вашему тд. Тем не менее, у вас все равно будут проблемы с вашим изображением. Что вы ожидаете, что произойдет с изображением? Вы не можете обернуть изображение, поэтому оно должно быть скрыто или меньше. Я не думаю, что есть обходной путь для этого.

Узнав, что это не поддерживается FF, что, как мне кажется, я в глубине души поняла, я провела еще несколько исследований. Из того, что я нашел, ты не можешь этого сделать. Есть два взлома, с которыми вы можете работать.

Первый - использовать тег, как описано в quirksmode . Недостатком является то, что это не поддерживается везде.

Другой - вставить пробел, который является чрезвычайно узким . Это дает ячейке таблицы что-то, на что можно сломаться. Надеюсь, кто-то другой сможет найти лучший ответ, соответствующий стандартам, но я не могу его найти.

1 голос
/ 22 августа 2011

Видя, что вы хотите сделать, вместо использования table рассмотрите возможность использования сетки Blueprint.

Эта страница показывает, на что она способна, и все это достигается путем простого импорта их файла grid.css в ваш HTML-документ и добавления некоторых элементов div с конкретными именами классов.

Вы можете скачать Blueprint здесь , а затем прочитать h3. Создание абзаца Grid в TUTORIAL.textile в загрузке.

...