Table - как избавиться от автоматического уменьшения ширины таблицы при уменьшении размера родит. элемента?

@eugen35 · Регистрация: 21.07.2014

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="ceWindow resizable">           
    <div class="okDiv resizable">с этим дивом всё нормально</div> 
    <br><br>
    <table>
        <tr class="first">
            <td class="resizable">Колонка 1</td>
            <td class="resizable">Колонка 2</td>
            <td class="resizable">Колонка 3</td>
            <td class="resizable">Колонка 4</td>
        </tr>                         
    </table>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.ceWindow { 
    width: 400px;
    height:  200px;
    border: double grey;
    overflow-x: scroll;
}
.okDiv{background: #f0f;width:200px;}
table {border-collapse: collapse; background:yellow;}
td {
    border-right: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
    padding: 2px 4px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var $itWorked, deltaX, deltaY;
$(document).ready(function(){
    $(".resizable:not(.dragable)").mousedown(function(e){
            e.stopPropagation();            
            $itWorked=$(this);        
            console.log("таблица");
            deltaX = e.pageX - $(this).offset().left;
            deltaY = e.pageY - $(this).offset().top;
            if ($itWorked.width() - deltaX < 8) {
                $(document).mousemove(function(e) {
                    $itWorked.width(e.pageX - $itWorked.offset().left);                 
                });            
            }
    });
        $(document).mouseup(function() {
            $(document).unbind("mousemove");
            $itWorked=null;
        });     
});

Вот ссылка на мой код:
http://jsfiddle.net/KT5TC/1/

Менять ширину элемента можно, наведя мышь на правый его край, далее - зажимаете левую кнопку мыши и меняете размер элемента.

1. Попробуйте уменьшить размер внешнего div (двойная рамка) меньше ширины таблицы - таблица начнёт сжиматься.
Тот же эффект Вы достигнете если просто будете уменьшать размер окна браузера.

2. Попробуйте увеличить размер СТОЛБЦА таблицы (хочу менять именно ширину столбцов и чтобы край таблицы при этом менялся автоматически - для таблицы я не задаю WIDTH). Если Вы увеличиваете его так, что край таблицы достигает края внешнего div, то ширина столбца начинает увеличиваться, а таблица пытается остаться на странице полностью, уменьшая ширину других столбцов).

3. Примечательно, что розовый div ведёт себя вполне корректно - если все те же действия применить к нему.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="ceWindow resizable">           
    <div class="okDiv resizable">с этим дивом всё нормально</div> 
    <br><br>
    <table>
        <tr class="first">
            <td class="resizable">Колонка 1</td>
            <td class="resizable">Колонка 2</td>
            <td class="resizable">Колонка 3</td>
            <td class="resizable">Колонка 4</td>
        </tr>                         
    </table>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.ceWindow { 
    width: 400px;
    height:  200px;
    border: double grey;
    overflow-x: scroll;
}
.okDiv{background: #f0f;width:350px;}
table {border-collapse: collapse; background:yellow;}
td {
    border-right: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
    padding: 2px 4px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var $itWorked, deltaX, deltaY;
$(document).ready(function(){
    $(".resizable:not(.dragable)").mousedown(function(e){
            e.stopPropagation();            
            $itWorked=$(this);        
            console.log("таблица");
            deltaX = e.pageX - $(this).offset().left;
            deltaY = e.pageY - $(this).offset().top;
            if ($itWorked.width() - deltaX < 8) {
                $(document).mousemove(function(e) {
                    $itWorked.width(e.pageX - $itWorked.offset().left);                 
                });            
            }
    });
        $(document).mouseup(function() {
            $(document).unbind("mousemove");
            $itWorked=null;
        });     
});

http://jsfiddle.net/KT5TC/ - здесь розовый див шире таблицы, чтобы Вы увидели его поведение.

ВОПРОС: МНЕ ОЧЕНЬ НУЖНО ЧТОБЫ ТАБЛИЦА ВЕЛА СЕБЯ КАК РОЗОВЫЙ ДИВ В ОБОИХ СЛУЧАЯХ! А именно если она по АВТОМАТИЧЕСКОЙ ширине должна стать больше родительского элемента - чтобы становилась и при этом становилась активной полоса прокрутки. И НЕ ИСПОЛЬЗОВАТЬ ДЛЯ ЭТОГО ДОПОЛНЕНИЯ В JS-коде!

Можно ли вообще это сделать вёрсткой (css + html)?

@BarbosLV · 21.07.2014, 10:45

задай таблице и ячейкам чёткие размеры.
пример:

CSS
1
2
3
4
5
6
.tabl{
    width:370px;
}
.tabl td{
    width:90px;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="ceWindow resizable">           
    <div class="okDiv resizable">с этим дивом всё нормально</div> 
    <br><br>
    <table class="tabl">
        <tr class="first">
            <td class="resizable">Колонка 1</td>
            <td class="resizable">Колонка 2</td>
            <td class="resizable">Колонка 3</td>
            <td class="resizable">Колонка 4</td>
        </tr>                         
    </table>
</div>

@eugen35 · 21.07.2014, 11:07 **[ТС]**

Спасибо, BarbosLV.
Но при этом не выполняется пункт №2 вопроса. Поскольку ширину столбца нельзя теперь изменять так, чтобы при этом менялась ширина таблицы. Если таблица, например, была 200px, затем увеличиваю ширину любого столбца на 40px - таблица остаётся 200px. А мне нужно, чтобы ширина таблицы соответственно увеличилась на 40px.
Программно то я мог бы поменять ширину таблицы вместе с шириной столбца... Но мне кажется это не айс. Раз таблица может автоопределять свою ширину из ширины столбцов - вот бы этим воспользоваться? ТОЛЬКО ВОТ ЗАЧЕМ ОНА ПЫТАЕТСЯ ПОДСТРОИТЬСЯ ПОД РАЗМЕР ЭКРАНА И КАК ЭТО ОТМЕНИТЬ? Ума не приложу!? (

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@eugen35 0 / 0 / 0 Регистрация: 21.07.2014 Сообщений: 8
	21.07.2014, 11:07 [ТС]
	Спасибо, BarbosLV. Но при этом не выполняется пункт №2 вопроса. Поскольку ширину столбца нельзя теперь изменять так, чтобы при этом менялась ширина таблицы. Если таблица, например, была 200px, затем увеличиваю ширину любого столбца на 40px - таблица остаётся 200px. А мне нужно, чтобы ширина таблицы соответственно увеличилась на 40px. Программно то я мог бы поменять ширину таблицы вместе с шириной столбца... Но мне кажется это не айс. Раз таблица может автоопределять свою ширину из ширины столбцов - вот бы этим воспользоваться? ТОЛЬКО ВОТ ЗАЧЕМ ОНА ПЫТАЕТСЯ ПОДСТРОИТЬСЯ ПОД РАЗМЕР ЭКРАНА И КАК ЭТО ОТМЕНИТЬ? Ума не приложу!? ( 0