我在固定标题中有一个表格，我希望它在调整窗口大小时动态调整大小。
当您重新调整窗口大小时，包含表格(代码中的 topTable)的 DIV 工作得很好，但表格没有正确调整大小，它确实达到了某个点，但在整个表格的 X 宽度之后向下移动!
知道如何:
- 使表格宽度与其父容器相同？
- 更重要的是，如何在调整窗口大小时正确调整表格大小？
我尝试过的:
- 我曾尝试设置表格的宽度 = 父容器:
$('#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;
}
如果您需要更多信息或更清楚，请告诉我。
最佳答案
我觉得你太努力了。没有所有 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，您可以使表格向下流动到更小的宽度。
关于jquery - 固定 DIV 内的动态调整表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20334042/