Скролбар в таблице

PhantomSL · January 26, 2009

Создается форма в которой в ячейке выводится изображение, когда изображение шире чем размер колонки (он не абсолютный и зависит от расширения экрана), то изображение расширяет колонку и рвет всю верстку Как добиться эффекта чтоб если изображение шире ячекйки появлялся горизонтальный скроллер в ячейке (или во вложенном элементе)?

Victor Ananiev · January 26, 2009

overflow: auto;

или картинку в фон)

PhantomSL · January 26, 2009

overflow: auto;
или картинку в фон)

Спасибо помогло, правда не сработало к TD, но на DIV повлияло

PhantomSL · January 26, 2009

Наверное я рано радовался сработало только в Opera

overflow срабатывает только если жестко заданы размеры элемента, у меня же данные выводтся в центральном столбце сайта, размер которого изменяется в зависимости от разрешения экрана. И задавать ему жесткий размер я не хочу

Victor Ananiev · January 26, 2009

а width:100%; тоже не выручает?

PhantomSL · January 26, 2009

а width:100%; тоже не выручает?

Сработало только в Опере, если вас не затруднит. Посмотрите может я упустил что-то из виду?

Неверное форматирование

Scrum · January 26, 2009

что-то подобное уже выкладывал клик может поможет.

PhantomSL · January 26, 2009

что-то подобное уже выкладывал клик может поможет.

Ваша ссылка довольно обширна, все что я на ней нашел это атрибут position, но как его применить в моем случает я чего-то не понял

Scrum · January 26, 2009

при чем здесь position ???


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
  <title></title>
  <style type="text/css">
  <!--
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }
  table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
  }
  td {
    padding: 0;
    vertical-align: top;
  }
  p {
    margin: 0;
  }
  #scrollbox {
    overflow: auto;
  }
  -->
  </style>
</head>

<body>

    <table>
        <tr>
            <td rowspan="3" width="200">menu</td>
            <td colspan="2" height="160">header</td>
        </tr>
        <tr>
            <td colspan="2" height="30">menu</td>
        </tr>
        <tr>
            <td height="100%" width="60%">
                <div id="scrollbox">
                    <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
                </div>
            </td>
            <td>menu</td>
        </tr>
        <tr>
            <td colspan="3" height="20">footer</td>
        </tr>
    </table>
<script language="JavaScript" type="text/javascript">
<!--
function fixbox() {
var body = document.body.offsetHeight;
document.getElementById("scrollbox").style.height = body - 224;
}
function reload() {
window.location.reload(true);
fixbox ();
}
fixbox ();
window.onresize= reload;
-->
</script>
</body>

</html>

PhantomSL · January 26, 2009

А без JS никак?

Sign In

Скролбар в таблице

Question

PhantomSL

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Victor Ananiev

Link to comment

Share on other sites

PhantomSL

Link to comment

Share on other sites

PhantomSL

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

PhantomSL

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

PhantomSL

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

PhantomSL

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information