Таблица динамического изменения размера внутри фиксированного DIV

0

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

DIV, который содержит таблицу (topTable в коде), отлично работает, когда вы меняете размер окна, но таблица не изменяется правильно, это происходит до определенной точки, но после X-ширины вся таблица перемещается вниз!,

Любая идея:

  1. Сделайте ширину таблицы такой же, как и ее родительский контейнер?
  2. Что еще более важно, как правильно изменить размер таблицы при изменении размера окна?.

То, что я пробовал:

  1. Я попытался установить ширину таблицы = родительский контейнер: $('#topTable').height($('#topRightContainer').height());
  2. Когда я создаю функцию resizeDic(), я помещаю там идентификатор таблицы: $("# (...), #topTable").width(widthA);

Мой код немного освещен, вот файл JFiddle: http://jsfiddle.net/japeljoff/SnPC5/1/

HTML:

<body>
<div id="container">
    <div id="topContainer">
        <div id="topLeftContainer"></div>
        <div id="topRightContainer">
            <table id="topTable" border="1">
            <tr>
                <th colspan="">Practice</th>
                <th colspan="">Leadership</th>
            </tr>
            <tr>
                <th colspan="">Learning</th>
                <th colspan="">Something1</th>
                <th colspan="">Something2</th>
                <th colspan="">Managing</th>
                <th colspan="">Leading</th>
            </tr>
            <tr>
                <th colspan="">Intern Arc</th>
                <th colspan="">Arc 1</th>
                <th colspan="">Arc 2</th>
                <th colspan="">Associate</th>
                <th colspan="">Senior Associate</th>
                <th colspan="">Partner</th>
            </tr>
            </table>
        </div>
    </div>
    <div id="bottomContainer">
        <div id="bottomLeftContainer">
        </div>
        <div id="bottomRightContainer">
            <!--<div id="bottomRight-LeftContainer"></div>
            <div id="bottomRight-RightContainer"></div>-->
        </div>
    </div>
</div>
</body>

Jquery:

var containerWidth = $("#container").width();
    /*- Set up the width in BottomContainer & TopContainer according to Container width-*/    
    $('#topContainer').width(containerWidth);
    $('#bottomContainer').width(containerWidth);

    /*- Set up the Margin Top on the BottomContainer to be just below the fixed header-*/
    $('#bottomContainer').css('margin-top', ($('#topContainer').height() + 1));

    /*- Distribute width space: 15% for LeftContainer & 85% for Rigth Container-*/
    $('#topLeftContainer').width(containerWidth * 0.15 );
    $('#topRightContainer').width(containerWidth * 0.85 );
    /*- Distribute width space: 15% for LeftContainer & 85% for Rigth Container-*/
    $('#bottomLeftContainer').width(containerWidth* 0.15);
    $('#bottomRightContainer').width(containerWidth* 0.85);

    $('#topTable').height($('#topRightContainer').height());



function resizeDiv() {
    var widthA = $(window).width() - 30; 
    if(widthA >= 500){

    $("#bottomContainer, #topContainer, #topRightContainer, #bottomRightContainer").width(widthA);

    }
}

$(window).resize(function() {
    resizeDiv()
});

$(window).load(function() {
    resizeDiv()
});

CSS:

#container {    
    width:800px;
    height:100%;
    /*background-color:red;*/
    position:relative;padding-right:50px;

}

#topContainer{
    background-color:yellow;
    height:100px;
    border:1px black solid;
    border-collapse:collapse;
    position:fixed;
    top:0;
    min-width:80px;
    width:1px;
    }

#bottomContainer{

    background-color:grey;
    height:300px;
    width:1px;
    border:1px black solid;
    border-collapse:collapse;
    min-width:100px;

}
#extra{background-color:green;height:10px;
    border:1px red solid;
    border-collapse:collapse;}

#topLeftContainer {
     background-color:#222222;
     height:100%;
     float:left;
}

#topRightContainer {
    background-color:#99281A;
    height:100%;
    min-width:80px!important;
}

#topTable{
    background-color:white;
    min-width:80px!important;
    border-collapse:collapse;

}

Если вам нужна дополнительная информация или яснее, пожалуйста, дайте мне знать.

Теги:
html-table
resize

2 ответа

1
Лучший ответ

Я думаю, вы слишком стараетесь. Таблицы могут быть легко текучими без всего этого JavaScript, так как вы здесь:

http://jsfiddle.net/isherwood/SnPC5/2/

Я сделал это, чтобы удалить #topLeftContainer, который, кажется, не имеет никакого смысла, и установите ширину таблицы на 100%. Немного больше стилей получило бы черный ящик, который был #topLeftContainer.

#topTable {
    width: 100%;
}

<div id="container">
    <div id="topContainer">
        <div id="topRightContainer">
            <table id="topTable" border="1">
                ...

С помощью некоторого отзывчивого CSS с помощью медиа-запросов вы сможете заставить таблицу течь вниз до меньшей ширины.

  • 0
    Это прекрасно работает! к сожалению, мне нужен левый контейнер. контейнер div таблицы должен составлять 85% от верхнего контейнера.
  • 0
    Вы можете заставить его работать с левым контейнером. Я бы искал более простой способ выполнить ваш макет. Это довольно сложно и, вероятно, не должно быть.
Показать ещё 1 комментарий
0

min-width на topRightContainer и topTable недостаточно для хранения содержимого таблицы. Поскольку содержимое занимает больше места, таблица переходит к следующей строке, когда размер окна изменяется на определенную ширину. Я могу подумать об этих вариантах:

  1. word-break: break-all на #topTable, который сломал бы слова при изменении размера окна вне размера содержимого, но это добавило бы высоту, так как текст перенесет на новую строку. Это не оптимальное решение, так как слова ломаются и завершаются в следующую строку, что делает его менее значимым для чтения.
  2. Установите белое пространство: nowrap на столе и увеличьте минимальную ширину на topTable и topRightContainer, чтобы они соответствовали содержимому. Полоса прокрутки автоматически появится при изменении размера окна, и вы можете перейти к содержимому.
  3. Уменьшите размер шрифта содержимого при изменении размера окна в соответствии с таблицей в DIV.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню