HTML таблица с шириной 100% не работает с длинным текстом

У меня есть следующая структура

<table cellspacing="0" cellpadding="0" width="100%">
<tr>
    <td style="width:60px;">
        ...
    </td>
    <td>
        <div style="width:100%;overflow-x:hidden;">
            PROBLEMS ARE HERE
        </div>
    </td>
</tr>
...
</table>

Первый td занимает 60px, второй занимает остальные 100%, но когда у меня есть какой-то длинный текст без пробелов и тире, таблица становится больше, чем 100%. Как отобразить неразрывный текст в одну или несколько строк (оба способа приемлемы) и сохранить таблицу на 100% экрана? Я пытался исправить это с помощью overflow-hidden, но это не имеет никакого эффекта.

Вот скриншот проблемы: ссылка

10 голосов | спросил Дамян Станчев 18 52011vEurope/Moscow11bEurope/MoscowFri, 18 Nov 2011 15:43:16 +0400 2011, 15:43:16

3 ответа


0

Установите table-layout : fixed в своем CSS или <table style='table-layout : fixed'> это нужно исправить.

Вот пример кода . Проверьте это.

ответил Ashwin Krishnamurthy 18 52011vEurope/Moscow11bEurope/MoscowFri, 18 Nov 2011 15:51:25 +0400 2011, 15:51:25
0

Существует свойство CSS3, word-wrap:break-word;, которое делает именно то, что вам нужно. Но, к сожалению, он не работает с ячейками таблицы. Я думаю, вам нужно переосмыслить свою структуру, выбрав дизайн без таблиц.

Я написал этот пример для вас

<style>
section { /* your table */
    display:block;
    width:300px;
    background-color:#aaf;
}
section:after {display:block; content:''; clear:left}

div { /* your cells */
    float:left;
    width:100px;
    background-color:#faa;
    word-wrap:break-word;
}
</style>

<section>
    <div>Content.</div>
    <div>Loooooooooooooooooooooooooooooooooooooooong cat.</div>
</section>

PS: word-wrap поддерживается в браузерах IE 5.5+, Firefox 3.5+ и WebKit, таких как Chrome и Safari.

ответил Simone 18 52011vEurope/Moscow11bEurope/MoscowFri, 18 Nov 2011 15:46:54 +0400 2011, 15:46:54
0

попробуйте следующее:

<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%">
<tr>
    <td style="width:60px;">
        ...
    </td>
    <td>
        <div style="width:100%;overflow-x:hidden;">
            PROBLEMS ARE no longer HERE !
        </div>
    </td>
</tr>
...
</table>
ответил Timothy Groote 18 52011vEurope/Moscow11bEurope/MoscowFri, 18 Nov 2011 15:48:38 +0400 2011, 15:48:38

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

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

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