автоматическая ширина и переполнение div - PullRequest
0 голосов
/ 15 апреля 2009

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

Чтобы представить ситуацию: мы создали сетку примерно так: Есть div-контейнер topcontainer, который содержит 3 других div-а: левый средний и правый контейнер. Левый контейнер содержит информацию о пользователях, разделенную на 4 столбца. Средний блок содержит x столбцов (в зависимости от того, сколько недель выбрал менеджер) с текстовыми полями, в которые можно вводить часы для определенного сотрудника, в правом блоке есть несколько столбцов для итогов и средних значений.

Чтобы перейти к моему вопросу: левые столбцы, содержащие данные пользователя, должны иметь динамическую ширину, когда я отображаю элемент управления с данными с сервера (asp.net 2.0) или когда строка добавляется через javascript, а пользователь выбрав, я хочу оставить столбцы в левом контейнере для автоматического изменения размера по горизонтали, когда это необходимо, и чтобы в верхнем контейнере появилась дополнительная полоса прокрутки (чтобы избежать вертикального разбиения моего div) Я подумал, что 2-й div topcontainer с максимальной шириной и div topcontainer с overflow-x: scroll, + a width: auto в моих столбцах должны были добиться цели, но это, похоже, не работает.

Может кто-нибудь поставить меня на правильный путь? Я надеюсь, что мое объяснение понятно. В любом случае я добавил картинку [изображение] [1] По сути, я хочу, чтобы мои левые столбцы адаптировались к ширине их содержимого и располагались на одном уровне по горизонтали.

ТНХ.

1 Ответ

1 голос
/ 16 апреля 2009

Я большой сторонник CSS-дизайна без таблиц, но если вам нужна таблица, используйте таблицу.

Вот код, с которого, я думаю, я начал.

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

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

<html>
<head>
<style>
table {
    width: 100%;
}
.left {
    background: red;
    width: 100px;
}
.right {
    background: blue;
    width: 100px;
}
.middle {
    background: green;
    width: 800px;
    display: block;
    overflow: scroll;
}
.inner {
    width: 2000px;
    height: 100px;
    background: black;
    display: block;
}
</style>
<body>
<table>
<tr><th class="left">Left</th><th class="middle">Middle Central block<table class="inner">Inner table</table></th><th class="right">Right</th></tr>
</table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...