Таблица внутри прокрутки div: заполнить div, но предотвратить ненужную горизонтальную полосу прокрутки

Question

div.GridViewScrollContainer
{
    overflow:auto;
    position: relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

div.GridViewScrollContainer table
{
    border-spacing:0;
    margin:0;
    border-collapse:collapse;
    padding:0;
}

Итак, я рендерил таблицу внутри div внутри некоторого элемента высоты / ширины, ограниченного относительно позиционированным элементом. Большую часть времени .GridViewScrollContainer очень хорошо прокручивает по вертикали.

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

Итак, для этого я добавил «width: 100%» к своему определению «таблица div.GridViewScrollContainer». Это сработало, за исключением того, что когда div имеет вертикальную полосу прокрутки, теперь также будет горизонтальная полоса прокрутки, предназначенная только для прокрутки ширины вертикальной полосы прокрутки.

Затем вместо «width: 100%» я попытался исправить это с помощью следующего сценария, который работает большую часть времени, но DHTML / AJAX означает, что мне нужно вызывать сценарий в различных ситуациях и Я не могу найти их всех.

$(function() {
    $("div.GridViewScrollContainer table").each(function() {
        if ((this.offsetParent.scrollWidth - this.clientWidth) > 2)
            $(this).width("100%");
    });
});

Наконец, я нашел следующий вопрос, который, кажется, относится к тому же типу ситуации, что и мой, но на самом деле ответа нет. Смежный вопрос. . У кого-нибудь есть идеи ... Я просто хочу заполнить div шириной и иметь только вертикальные / горизонтальные полосы прокрутки, когда это необходимо. Большое спасибо.

ТОЛЬКО для IE7!

Answer 1

Вы можете использовать CSS, чтобы скрыть горизонтальную полосу прокрутки. Используйте следующий CSS в вашем контейнере DIV:

overflow-x: hidden;

Это устранит горизонтальную полосу прокрутки, вызванную таблицей. Просто убедитесь, что таблица не превышает ширину родительского DIV.

Answer 2

К сожалению, чистого CSS-решения не существует. Вы можете создать макет с идеальным пикселем и просто установить ширину на определенное количество пикселей; Вы можете выдумать это с width: 95%; или вы можете жить с полосами прокрутки. К сожалению, я думаю, что это ваша лучшая ставка.