Проблемы ширины со сложным поведением прокрутки в Div

Question

Нам нужно отобразить данные в прокручиваемом div.

Мы создали упрощенную скрипку для демонстрации: http://jsfiddle.net/ZsQ5J/3/

Блок содержит две части, заголовок и содержимое.

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

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

Мы получили большую часть пути в CSS, но мы не можем заставить div содержимого растягивать всю ширину заголовка. Потому что, я думаю, создание div содержимого100% содержащего div не является полной шириной заголовка.

Чуть глубже:

HEADER:

Мы хотим, чтобы заголовок оставался видимым для всехвремя прокрутки вверх / вниз по контенту.Однако заголовок шире, чем содержащий div, поэтому мы хотим, чтобы он прокручивался горизонтально.(Так что никакой вертикальной прокрутки на заголовке, только горизонтальная).У нас есть эта часть работает.Заголовок - это таблица.

CONTENT:

Контент - это div, который мы хотим прокрутить как по горизонтали (синхронно с заголовком), так и по вертикали (независимо от заголовка).Это та часть, с которой у нас проблемы.Прокрутка работает хорошо, но ширина не увеличивается, чтобы соответствовать заголовку.Он будет иметь такую ​​же ширину, что и содержащий div.

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

Answer 1

Не уверен из вопроса, можете ли вы добавить дополнительные разметки в разметку, но если вы можете, возможное решение это: http://jsfiddle.net/ZsQ5J/8/

Но возможна проблема - полоса прокрутки не будет видна по умолчанию. Так ли это нормально?

Answer 2

Не уверен, что это именно то, что вы хотите, но это работает.-Вакета

body
{
    width:100%;
}

#outer_container
{
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    border:6px solid #FF0000;
    overflow-x:auto;
    overflow-y:hidden;
}
#top_container
{
    display: block;
    width:1500px;
    padding:10px;
    background-color:#CC66FF;
}
#bottom_container
{
    height: 400px;
    width:1500px;
    padding:10px;
    background-color:#FFFF66;
    overflow-y:scroll !important;
}
em
{
    font-weight:bold;
}