td + overflow

klierik · March 12, 2008

Приветствую.

Подскажите как сделать, чтоб контент в одной определенной ячейке не растягивал е?,

а просто пропадал за ее границами?

естественно td {overflow: hidden;} неработает,

может будут альтернативы?

зы: перепробовал кучу способов, пока что ничего не получилось ((

tnx

Иван Шумов · March 12, 2008

<td><div style="overflow: hidden;"></div></td>

покатит?

klierik · March 12, 2008

не а 8)))

ячейка тянеться по контенту.

зы: пока что отладка под FF ))

Scrum · March 12, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 table {
 width: 100%;
 table-layout: fixed;
 }
 .fixed {
 width: 100px;
 overflow: hidden;
 }
 p {
 white-space: nowrap;
 }


 /*]]>*/
 </style>
</head>

<body>
 <table border="1">
 <tr>
 <td>test</td>
 <td class="fixed"><p>test, test, test, test, test</p></td>
 <td>test</td>
 </tr>
 </table>
</body>

</html>

оно ?

klierik · March 12, 2008

table-layout: fixed;

да.. хорошее решение..

все б ничего, только вот при сжатии контент пропадает вне области (((

и min-width организовать невозможно будет (((

так же на td неработает overflow

сейчас попробуй объяснить суть...

есть таблица и N-ое кол-во ячеек которые тянут таблицу по высоте.

и есть одна из ячеек содержимое которое может потянуть таблицу

вот надо именно этой ячейке запретить это делать )))

вообще сомневаюсь что вообще это реально сделать )))

makarena · March 12, 2008

div"у указать высоту ячейки, тогда хайдиться будет замечательно

Scrum · March 12, 2008

и min-width организовать невозможно будет (((

из этого я понял что ячейка должна тянуться, но при сужение должна иметь мин-ширину.

Да скорее всего придеться через JavaScript

так же на td неработает overflow

почему ? у меня же работает ))

klierik · March 12, 2008

div"у указать высоту ячейки, тогда хайдиться будет замечательно

а как узнать высоту ячейки

они то динамичные ))

почему ? у меня же работает ))

работает.. только не изза overflow

и изза fixed =)

ну или изза того + другое ))

Да скорее всего придеться через JavaScript

в данном конкретном случае это нельзя решить даже средствами JS

так как нет событие которое возникало б при ресайзе таблицы (не путать с ресайзом окна)

как вариант я думаю просто всунуть див с фиксированной шириной.

строиться это все так , что б под всеми, за исключением ИЕ, браузерами работало под xHTML

а под ИЕ оно будет рабоать в QM )))))))

ууу.. злосный проект ))))

и тут грабли в ИЕ просто напросто на каждом шагу (((

к примеру див с фикс. шириной все равно будет растягиваться при новрапе..

ужас )))))

в общем пока что ищу решение )))

Scrum · March 13, 2008

как вариант я думаю просто всунуть див с фиксированной шириной.

если я правильно понял идею то это бессмыслено, т.к. у тд будет overflow и при сужение окна он все равно обрежет.

в данном конкретном случае это нельзя решить даже средствами JS

[window.]document.getElementById("elementID").style.width

???

klierik · March 13, 2008

если я правильно понял идею то это бессмыслено, т.к. у тд будет overflow и при сужение окна он все равно обрежет.

при table-layout:fixed ето бессмысленно. а вот без него - нет 8)

[window.]document.getElementById("elementID").style.width

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

А нет такоого события, которое возникало при ресайзе таблицы..

Scrum · March 13, 2008

ууу.. злосный проект ))))

немного подумав.

А зачем тебе событие ? как на счет условия ?

klierik · March 14, 2008

а на что его вешать???

Scrum · March 14, 2008

на эту же ячейку и вешать.

Типа если больше 100пх то ауто если меньше то 100пх

klierik · March 17, 2008

так это при рендеринге...

а таблица может меняться как хочет без перезагрузки страницы... как ее высота так и ее ширина )))

Scrum · March 18, 2008

да ведать никак.

на чем заткнулся и уполз под стол.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 table {
 width: 100%;
 table-layout: fixed;
 }
 #fixed {
 overflow: hidden;
 }
 p {
 white-space: nowrap;
 }
 /*]]>*/
 </style>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 function addCol()
{
 var table = document.getElementById("table").getElementsByTagName("TR")[0];
 var td1 = document.createElement("TD");

 table.appendChild(td1);
 td1.innerHTML = "test";
}
 /*]]>*/
 </script>
</head>

<body>
 <table border="1" id="table">
 <tr>
 <td>test</td>
 <td id="fixed"><p>test, test, test, test, test</p></td>
 <td>test</td>
 </tr>
 </table>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var fix = document.getElementById('fixed').clientWidth;
if (fix < 100)
{
 document.getElementById("fixed").style.width = 100 + "px";
 document.write("TD id='fixed': " + fix);
}
else
{
 document.getElementById("fixed").style.width ="auto";
 document.write("TD id='fixed' width : " + fix);
}
/*]]>*/
</script>
<form action="" onsubmit="addCol();return false;">
 <input type="submit" value="Добавить" />
</form>
</body>

</html>

Sign In

td + overflow

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information