Question

我在固定标题内有一个表格，我希望在重新调整窗口大小时动态调整大小。

包含表格的代码（代码中的topTable）在重新调整窗口大小时效果很好，但是表格没有正确调整大小，它确实达到某个点但是在X宽度之后整个表格向下移动！。

任何想法如何：

使表格宽度与其父容器相同吗？
更重要的是，如何在窗口调整大小时正确调整表格的大小？。

我曾尝试过：

我曾试图设置table = parent的容器的宽度：$('#topTable').height($('#topRightContainer').height());
当我创建resizeDic（）函数时，我将表ID放在那里： $("# (...), #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's 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;

}

如果您需要更多信息或更清楚，请告知我们。

Answer 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，您可以将表格向下流动到更小的宽度。

Answer 2

topRightContainer 和 topTable 上的

min-width 不足以保存表格的内容。由于内容占用更多空间，因此当窗口调整大小超过一定宽度时，表格将移动到下一行。我可以想到这些选择：

word-break：在#topTable 上的break-all会破坏调整窗口大小超出内容大小的单词，但是会增加高度，因为文本将换行到新行。它不是最佳解决方案，因为单词会破坏并包含在下一行中，使其阅读意义不大。
设置 white-space：nowrap on table 并增加topTable和topRightContainer的最小宽度设置以适合内容。滚动条将在调整窗口大小时自动显示，您可以滚动到内容。
在调整窗口大小时缩小内容的字体大小以适合DIV中的表格。

固定DIV内的动态调整大小表

2 个答案: