Переполнение: прокрутка в ячейке таблицы - работает в Chrome, больше нигде не работает - PullRequest
Новая
       19

Переполнение: прокрутка в ячейке таблицы - работает в Chrome, больше нигде не работает

1 голос
/ 09 апреля 2011

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

Вот пример на jfiddle . Как видите, он работает в Google Chrome, но не работает ни в Firefox, ни в IE: они просто ведут себя так, как будто переполнения не было: прокрутка вообще. Не пробовал в Safari, но я подозреваю, что это тоже не сработает.

Итак, кто здесь виноват, Chrome за реализацию чего-то, что не должно поддерживаться, или все остальные? Обновление: , чтобы быть ясным, переполняется не сама ячейка, а div, который я вставил в нее. Код выглядит так: 

<table>
    <tr>
        <td class="header">
            <div class="header">Header</div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="scroll">
                ... VERY BIG CONTENT HERE ... 
            </div>
        </td>
    </tr>
    <tr>
      <td class="footer">
        <div class="footer">Footer</div>
      </td>
    </tr>
</table>

Вы можете увидеть все это на jfiddle .

Я пытаюсь добиться компоновки, при которой доступное пространство между верхним и нижним колонтитулом полностью заполняется и , если пространство исчерпано, тогда оно получает полоса прокрутки, а не все окно. Я пришел к пониманию, даже если вкратце описать переполнение стека, то, что с помощью одного только CSS, используя только DIV, это невозможно (использование абсолютного позиционирования не вариант, поскольку элементы извлекаются из нормального потока и «экстремальное» изменение размера окна приведет к перекрытию элементов).

Обновление: модель flexbox , кажется, именно то, что требуется в этих случаях. Тем не менее, я полагаю, что мы не можем полагаться на то, что он будет широко реализован.

Ответы [ 3 ]

1 голос
/ 09 апреля 2011

Если вы посмотрите в спецификации CSS, вы обнаружите, что использование правил типа position и overflow для элементов таблицы фактически не определено. На самом деле таблицы имеют свои собственные сложные правила компоновки, которые конфликтуют со многими правилами CSS, и спецификация в значительной степени оставляет браузерам возможность делать то, что они хотят.

Так что, чтобы ответить на часть вашего вопроса, это действительно никто не виноват. Ни один браузер не является правильным или неправильным.

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

ОБНОВЛЕНО ДЛЯ ВАШЕГО РЕДАКТИРОВАНИЯ

То, что вы пытаетесь сделать, конфликтует с алгоритмом разметки таблицы. По умолчанию таблицы изменяют размеры своих ячеек , чтобы они соответствовали содержимому строки / столбца . Полоса прокрутки, несмотря на то, что вы пытаетесь остановить это, делая то, что не определено в спецификации. У браузеров нет «правильного» способа сделать то, что вы просите, с помощью ячейки таблицы.

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

1 голос
/ 09 апреля 2011

Это то, что вы пытаетесь достичь http://www.cssplay.co.uk/layouts/basics2.html?

0 голосов
/ 30 июля 2013

Не могли бы вы просто превратить это в три отдельные таблицы с промежуточной таблицей, окруженной div, чтобы вы могли применить к ней прокрутку? 

div {
    overflow-y:scroll;
    //set height to however large you would like your scrollable area to be
}
<table>
    <tr>
        <td class="header">
            <div class="header">Header</div>
        </td>
    </tr>
</table
<div>
    <table>
        <tr>
            <td>
                <div class="scroll">
                    ... VERY BIG CONTENT HERE ... 
                </div>
            </td>
        </tr>
    </table>
</div>
<table>
    <tr>
        <td class="footer">
            <div class="footer">Footer</div>
        </td>
    </tr>
</table>
...