переполнение: скрыто не работает при использовании таблиц - PullRequest
Новая
       9

переполнение: скрыто не работает при использовании таблиц

11 голосов
/ 29 октября 2009

У меня проблемы с длинными строками текста, растягивающими мои таблицы, и overflow:hidden, похоже, не выполняет то, что я выставляю. Вот пример кода, который я использую для проверки этого эффекта: 

<html>
    <head>
        <style type="text/css">
            td.scroll
            {
                background-color:#00FFFF;
                width:100px;
                height:100px;
                overflow:scroll;
            }
            td.hidden 
            {
                background-color:#00FF00;
                width:100px;
                height:100px;
                overflow:hidden;
            }
        </style>
    </head>
    <body>
        <table width="100%">
            <tr>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
            </tr>
            <tr>
                <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
            </tr>
            <tr>
                <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
            </tr>
        </table>
    </body>
</html>

При загрузке текст, независимо от ширины таблицы, растягивается, чтобы отобразить всю строку. Я хочу, чтобы какая-то часть строки, которая прошла бы мимо измерения ячейки, не отображалась. Возможно ли это даже с таблицами, и если да, что я делаю не так?

Ответы [ 4 ]

22 голосов
/ 29 октября 2009

Переполнение работает только для элементов уровня блока. Элементы таблицы не являются блочными элементами. Если вы хотите получить эти эффекты, поместите <div> в ячейку таблицы и примените эффекты к <div>. 

td.scroll div {
  background-color: #00FFFF;
  width: 100px;
  height: 100px;
  overflow: scroll;
}

td.hidden div {
  background-color: #00FF00;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

с: 

<table width="100%">
<tr>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>

<tr>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>

<tr>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>
</table>
19 голосов
/ 29 октября 2009

По умолчанию механизм автоматического размещения таблиц расширяет ширину таблицы до минимальной ширины содержимого ячейки. Скажите, чтобы это не делалось со свойством table-layout : 

<table width="100%" style="table-layout: fixed">

и ваш пример работает как положено. Возможно, вам также следует удалить width: 100px из ячеек таблицы, поскольку это не имеет смысла в сочетании с таблицей со 100% -ной шириной. (Хотя при фиксированной разметке таблицы это не имеет значения, так как только ширина строки столбца или <col> s имеет отношение к ширине столбца.)

Примечание overflow: scroll или auto не работает для ячеек таблицы в большинстве браузеров. (Это делается в WebKit.)

0 голосов
/ 29 октября 2009 
<html>
<head>
<style>
td { width: 33%; height: 2em; }
td div { width:100%;height:100%;overflow:hidden }
</style>

</head>

<body>

<table border="1" style="width:300px;">
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
<tr><td>x</td><td><div>this is going to be hidden because it is too long</div></td><td>z</td></tr>
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
</table>

</body>

</html>
0 голосов
/ 29 октября 2009

Не уверен, что он не должен работать для ячеек таблицы, но в идеале вы все равно не хотите их скрывать. Я предлагаю вам написать длинные слова через дефис, что вы можете легко сделать с помощью следующей библиотеки (для ее реализации потребуется всего несколько строк js):

http://code.google.com/p/hyphenator/

Пример:

http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...