Стол внутри дивана с максимальной высотой - PullRequest
Новая
       1

Стол внутри дивана с максимальной высотой

4 голосов
/ 19 августа 2011

Я хочу прокручиваемый стол. Чтобы достичь этого, я обертываю <table> в <div> с max-height и overflow: auto. Кроме того, <div> имеет display: inline-block, чтобы гарантировать, что div корректирует свою ширину в соответствии с базовой таблицей. 

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        div { max-height: 100px; display: inline-block;
              overflow: auto; border: 1px solid red; }
        td { border-bottom: 1px solid black; }
    </style>
</head>
<body>
    <div>
        <table>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
            <tr><td>bla bla bla bla bla</td></tr>
        </table>
    </div>
</body>
</html>

В большинстве браузеров (Firefox, Safari, Chrome) это вызывает проблему: если таблица длиннее 100 пикселей, добавляются вертикальные полосы прокрутки без , делающие div более широким, вызывая перенос текста:

Firefox screenshot

В IE это выглядит "правильно":

IE screenshot

Есть ли способ это исправить?

Ответы [ 2 ]

4 голосов
/ 19 августа 2011

http://jsfiddle.net/3VSZE/44/

Так что происходит, прежде чем полоса прокрутки рендеринга, это установка ширины таблицы == ширина содержащего div.Итак, для разговора, допустим, ширина div равна 100px, ширина полосы прокрутки равна 10px, а ширина внутренней таблицы равна 100px.Когда браузер пытается отобразить div, он принимает общую ширину 100px.Затем он идет своим веселым путем, представляя содержимое div.Затем добавляется полоса прокрутки, и содержимое div теперь имеет общую ширину 110px (таблица + полоса прокрутки), но ширина div по-прежнему составляет 100px.Таким образом, в основном, браузер пытается отобразить 110px внутри контейнера 100px, вызывая видимость обтекания.

Именно поэтому добавляем второй div, а затем присваиваем ему div, чтобы полоса прокруткиподходит, работает.Я сделал это в IE8, и он не добавляет дополнительного места (как я изначально думал, что это будет).Стоит отметить, что когда вы делаете это в режиме совместимости, div занимает всю ширину страницы.Это происходит в моем примере и с вашим.Я не знаю, как это исправить;но это не по теме для этого вопроса.У меня не было времени, чтобы попробовать IE7.

Это немного чище, а также то, что оно работает, когда содержимое одной из строк намного шире:

http://jsfiddle.net/3VSZE/75/

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        .a { border: 1px solid red; display: inline-block; }
        .b { width: 100%; overflow: auto; max-height:100px; margin-right: 18px; }
        td { border-bottom: 1px solid black; }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            <table>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
                <tr><td>bla bla bla bla bla</td></tr>
            </table>
        </div>
    </div>
</body>
</html>
0 голосов
/ 19 августа 2011

Использовать Nowrap https://developer.mozilla.org/en/CSS/white-space

Примените его к <td>

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

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

...