overflow:hidden, не работающий при использовании таблиц
Рассмотрите свою команду и размер проекта при рассмотрении ActiveRecord.
, По моему опыту, ActiveRecord является абстракцией сверху NHibernate, который начинает протекать как решето при попытке более сложных сценариев.
, Если Вы имеете умеренно к в большой степени сложной или непростой схеме, палке с NHibernate. Можно нарезать и поставить на карту его к близкому совершенству.
другое место, Вы могли бы попасть в беду, - при необходимости в умеренно сложном запросе. ActiveRecord скрывает большую реализацию NHIBERNATE..., но Вам будет нужен он для сложного запроса, который станет очень трудным, если Вы будете абсолютно незнакомы с HQL. Будьте осторожными членами команды, только взламывают далеко в краях вместо того, чтобы изучить NHibernate и HQL.
4 ответа
Переполнение работает только с элементами уровня блока. Элементы таблицы не являются блочными элементами. Если вы хотите получить эти эффекты, поместите с помощью: 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>
По умолчанию механизм auto-table-layout расширяет ширину таблицы до минимальной ширины содержимого ячейки. Скажите ему не делать этого с помощью свойства table-layout :
<table width="100%" style="table-layout: fixed">
, и ваш пример работает должным образом. Вероятно, вам также следует удалить width: 100px из ячеек таблицы, поскольку это не имеет смысла в сочетании со 100% -ной таблицей. (Хотя при фиксированном макете таблицы это не имеет значения, поскольку только первая строка ячеек или имеет какое-либо отношение к ширине столбца.)
Примечание overflow: scroll или auto не работают для ячеек таблицы в большинстве браузеров. (Это есть в WebKit.)
<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>
Не уверен, что это не должно работать для ячеек таблицы, но в идеале вы все равно не хотите их скрывать. Я предлагаю вам переносить длинные слова, что вы легко можете сделать с помощью следующей библиотеки (для реализации потребуется всего несколько строк js):
http://code.google.com/p/hyphenator/
Пример:
http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html