2009-04-15 3 views
0

Я создаю сетку для проекта. У сетки есть одно специальное требование (именно поэтому мы пытаемся создать его в доме), средние столбцы должны быть прокручиваемы.auto width & overflow div

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

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

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

thx.

+0

Это звучит как много столбцов: 4 + x + некоторые! Вы имели в виду несколько строк для некоторых из них? – wheresrhys

+0

вне темы, но я бы не опубликовал свою учетную запись picasaweb, которая ведет к вашему адресу электронной почты на любом сайте – IEnumerator

+0

Нет, они действительно все столбцы. каждая строка содержит некоторые поля данных + до 78 часовых полей (= недели за полтора года) Хорошая точка thx, но это была единственная услуга, доступная в нашей сети. Сегодня вечером я изменю его. – DavyR

ответ

1

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

Вот какой код, где я думаю, что у вас есть вы начали.

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

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

<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> 
+0

Thx Jon, я играл с ним, но у меня было много неприятностей, чтобы выровнять строки, не вызывающие напряжения, на той же высоте, что и обычная таблица/ячейки таблицы. Во всяком случае, я использовал грязное исправление Javascript, поскольку у меня не хватило времени. Но я сохраню неподдельное значение для рефакторинга моего текущего кода, когда доступно свободное время. – DavyR