У меня есть таблица внутри фиксированного заголовка, и я бы хотел, чтобы она была динамически изменена при изменении размера окна.
DIV, который содержит таблицу (topTable в коде), отлично работает, когда вы меняете размер окна, но таблица не изменяется правильно, это происходит до определенной точки, но после X-ширины вся таблица перемещается вниз!,
Любая идея:
То, что я пробовал:
$('#topTable').height($('#topRightContainer').height());
$("# (...), #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;
}
Если вам нужна дополнительная информация или яснее, пожалуйста, дайте мне знать.
Я думаю, вы слишком стараетесь. Таблицы могут быть легко текучими без всего этого 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 с помощью медиа-запросов вы сможете заставить таблицу течь вниз до меньшей ширины.
min-width на topRightContainer и topTable недостаточно для хранения содержимого таблицы. Поскольку содержимое занимает больше места, таблица переходит к следующей строке, когда размер окна изменяется на определенную ширину. Я могу подумать об этих вариантах: