Блог

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

Вот пример на jfiddle. Как вы можете видеть, это работает в Google Chrome, но не работает ни в Firefox, ни в IE: они просто ведут себя так, как будто overflow: scroll вообще не было. Не пробовал это в 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.

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

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

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

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

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

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

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

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

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

Не могли бы вы просто разбить это на три отдельные таблицы со средней таблицей, окруженной 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>