CSS и DIV с динамической шириной

Мне нужно установить динамическую ширину div, потому что у меня есть динамическая таблица внутри этого div, и когда в ней слишком много столбцов, я не могу прокручивать по горизонтали нижнюю панель (не DIV, а браузер) .

У меня есть это в моем файле HTML:

<div class="total">
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            ...
            <td>row 1, cell m</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            ...
            <td>row 2, cell m</td>
        </tr>
        ...
        <tr>
            <td>row n, cell 1</td>
            ...
            <td>row n, cell m</td>
        </tr>
    </table>
</div>​

и у меня есть это в моем css:

.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
width:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
overflow: hidden;
}

Вот ссылка с примером того, что я делаю:

ССЫЛКА jsfiddle

Как я могу установить динамическую ширину «общего» div? Это должно работать в браузере IE7.


dynamic html css width
person abierto    schedule 02.01.2013    source источник
comment
Вы можете использовать jQuery. Проверьте эту тему stackoverflow.com/ вопросы/1015669/   -  person smefju    schedule 02.01.2013
comment
Разве я не могу сделать это только с помощью css?   -  person abierto    schedule 02.01.2013
comment
Я не могу вспомнить ТАК вопрос, который я видел, который был похож на этот, но я мог бы поклясться, что решение было в том, что они установили ширину и высоту на 100% как в элементах ‹html›, так и в ‹body›.   -  person huzzah    schedule 02.01.2013

Ответы (3)


arrow_upward
2
arrow_downward

Вы не можете сделать это с рамкой или любыми свойствами форматирования блока на <div>, см. урезанную версию здесь: http://jsfiddle.net/MQ9MJ/1/

Если вместо этого вы переместите эти стили в <table> и <td>, это будет работать: http://jsfiddle.net/MQ9MJ/ 3/

person skyline3000    schedule 02.01.2013
comment
Хорошо, но на самом деле мне нужно использовать свою таблицу внутри этого DIV, потому что весь веб-сайт использует этот DIV в качестве своего основного контейнера. Вы предлагаете изменить общий DIV на таблицу? - person abierto; 02.01.2013
comment
Однако это один из способов сделать это, я бы, вероятно, просто изменил .total на display: table;, поскольку вам нужен макет таблицы, но на самом деле вы не хотите семантически использовать элемент таблицы. См. здесь: jsfiddle.net/MQ9MJ/4 - person skyline3000; 02.01.2013
comment
'отображение: таблица;' не работает в IE7, я только что проверил... Есть ли что-нибудь еще, что мне нужно? Я должен заставить его работать на IE7... - person abierto; 03.01.2013
comment
Вот веб-страница, на которой подробно описано, какие свойства отображения работают в каждом браузере: quirksmode.org/css/display.html. Я считаю, что вы также можете сделать это с помощью display:inline-block;, но я не уверен, как это будет работать в IE7 (у меня он больше не установлен), но этот сайт говорит, что это может работать. Кроме этого, вам придется использовать элемент <table>. Я не уверен, как структурирован ваш сайт, но если бы вы могли, я бы предпочел включить небольшой javascript, предназначенный только для пользователей IE7, который изменяет div на таблицу таким образом, что только небольшой % пользователей должен будет получить эту гадость . - person skyline3000; 03.01.2013

arrow_upward
0
arrow_downward

Вам нужно избавиться от свойства overflow:hidden. Вместо этого используйте overflow:auto, тогда ваш div будет прокручиваться.

person omniflash    schedule 02.01.2013
comment
Я не хочу иметь бары ВНУТРИ DIV. Мне нужно, чтобы ширина DIV росла, когда таблица становится длиннее. - person abierto; 02.01.2013

arrow_upward
0
arrow_downward

Попробуйте этот CSS

.total{
     position:relative;
     top:50px;
     margin: 0 auto;
     background-color:#eeeeee;
     height:auto;
     border:2px solid #000;
     border-color:rgb(82,115,154);
     overflow: none;
}
td{
    min-width:50px;
}
person Saju    schedule 02.01.2013
comment
Это позволяет мне прокручивать таблицу с помощью полосы прокрутки моего браузера, но ширина моего DIV по-прежнему фиксирована, а не динамическая. Моя основная проблема заключалась в том, чтобы иметь переменную ширину в моем DIV. - person abierto; 02.01.2013