如何使用jQuery制作流体宽度,流体高度,固定标题表?
我一直在为HTML/CSS流体宽度,流体高度,固定表头工作而没有成功。我希望你能指点我一个JavaScript或jQuery解决方案。如何使用jQuery制作流体宽度,流体高度,固定标题表?
标准:
- 表必须填写的浏览器窗口(至少集装箱)
- 表必须填充可用容器的整个高度在浏览器窗口中
- TBODY必须滚动Y的整个宽度上如果有没有足够的房间中的所有行
- THEAD日和TBODY TD列必须排队
纯HTML/CSS是一个胸围。如何jQuery或JavaScript?
这里有一个小提琴:http://jsfiddle.net/JXWfC/6/
它最终将需要在IE7 +,以及Chrome和Firefox的现代版本。
这里是我的基本页面的一些标记:
<div class="container">
<div class="sidebar">
nav here
</div>
<div class="content">
<table>
<thead>
<tr><th>column 1</th><th>2</th><th>three</th><th>this is column four</th></tr>
</thead>
<tbody>
<tr><td>data</td><td>can</td><td>have</td><td>different widths: not all the same</td></tr>
<tr><td>table</td><td>-</td><td>should</td><td>fill 100% width and 100% height</td></tr>
<tr><td>and</td><td>-</td><td>should</td><td>not require all td's to be same width</td></tr>
<tr><td>but</td><td>-</td><td>percentage</td><td>% widths are just fine</td></tr>
<tr><td>and</td><td>if</td><td>there's</td><td>too many rows, it should scroll y (overflow-y: scroll)</td></tr>
<tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr>
<tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr>
<tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr>
<tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr>
</tbody>
</table>
</div>
</div>
这是不完整的,没有任何东西而Chrome得到遏制,但希望它会让你在正确的轨道上。
基本上这种方法是使容器position:relative;
和th
标签全部为position:absolute;
。这需要相当多的额外代码才能正确定位,但是使标题始终保持不变并且表格单元格滚动是一个不错的方法。
或者,您可以使标题与表格分开,但仍然需要设置宽度以便列排齐。一匹马,真的。
http://jsfiddle.net/daCrosby/JXWfC/9/
<div id="hold">
<div class="header">
<h4>title goes here</h4>
</div>
<div class="container">
<div class="sidebar">sidebar<br />nav<br />goes<br />here</div>
<div class="content" >
<table>
<thead>
<tr>
<th class="col1">column 1</th>
<th class="col2">2</th>
<th class="col3">three</th>
<th class="col4">this is column four</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">data</td>
<td class="col2">can</td>
<td class="col3">have</td>
<td class="col4">different widths: not all the same</td>
</tr>
[ ... ]
CSS
body{
background:#000;
}
div {
display:inline-block;
vertical-align:top;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#hold{
display:block;
padding:40px 10px;
width:95%;
margin:auto;
}
.content table,
.header,
.container{
width:100%;
max-height:100%;
}
.header {
background:darkgray;
color:white;
text-align:center;
}
.container {
background:lightgray;
}
.sidebar {
width:20%;
background:green;
color:white;
float:left;
}
.content {
width:80%;
position:relative;
}
h4 {
margin:0;
}
table {
border-collapse: collapse;
border-spacing: 0;
background:red;
overflow-y:scroll;
height:300px;
display:block;
}
thead {
position:absolute;
top:1px;
left:0px;
right:0px;
}
tbody{
padding:1.3em 0px 0px;
margin:0px;
display:block;
}
tr{
width:100%;
display:block;
margin-top:-2px;
}
th {
background:#666;
color:#fff;
position:absolute;
}
td {
display:inline-block;
margin:0px;
padding:0px;
background:#ddd;
}
td.col2,
td.col3,
td.col4{
margin-left:-4px;
}
.col1 { width:20%; }
.col2 { width:10%; }
.col3 { width:20%; }
.col4 { width:50%; }
th.col1 { left:0px; right:80%; }
th.col2 { left:20%; right:70%; }
th.col3 { left:30%; right:50%; }
th.col4 { left:50%; right:0x; }
伟大的工作!该示例有效(至少在Chrome中)。我不确定绝对定位是否适合我在制作中,但我会试一试。没有JavaScript的额外分数! – Ryan 2013-04-24 21:30:37
另外,还有关于如何填充可用高度的任何提示?我怀疑这可能需要jQuery(可能'.height()'),但我不知道如何使它工作。 (我一直在玩'$(window).height() - somePixelHeight') – Ryan 2013-04-24 21:33:18
Yay!这可能工作! http://jsfiddle.net/JXWfC/10/请继续关注大绿色复选标记。我试图让它在生产中先行工作。 – Ryan 2013-04-24 21:40:33
这是你想要什么? Working example
<div class="container" style="overflow:scroll;">
<div class="sidebar">nav here</div>
<div class="content">
<table>
<thead>
<tr>
<th width=25%>column 1</th>
<th width=25%>2</th>
<th width=25%>three</th>
<th width=25%>this is column four</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>can</td>
<td>have</td>
<td>different widths: not all the same</td>
</tr>
<tr>
<td>table</td>
<td>-</td>
<td>should</td>
<td>fill 100% width and 100% height</td>
</tr>
<tr>
<td>and</td>
<td>-</td>
<td>should</td>
<td>not require all td's to be same width</td>
</tr>
<tr>
<td>but</td>
<td>-</td>
<td>percentage</td>
<td>% widths are just fine</td>
</tr>
<tr>
<td>and</td>
<td>if</td>
<td>there's</td>
<td>too many rows, it should scroll y (overflow-y: scroll)</td>
</tr>
<tr>
<td>sample</td>
<td>1</td>
<td>row</td>
<td>Lorem ipsum dolor sit amit.</td>
</tr>
<tr>
<td>sample</td>
<td>1</td>
<td>row</td>
<td>Lorem ipsum dolor sit amit.</td>
</tr>
<tr>
<td>sample</td>
<td>1</td>
<td>row</td>
<td>Lorem ipsum dolor sit amit.</td>
</tr>
<tr>
<td>sample</td>
<td>1</td>
<td>row</td>
<td>Lorem ipsum dolor sit amit.</td>
</tr>
</tbody>
</table>
</div>
</div>
这与我所寻找的更接近:http://jsfiddle.net/JXWfC/3/除了:(1)头部不会像tbody滚动一样可见,(2)表格不是容器的100%宽度(即它不会伸展到窗口的右侧)。 – Ryan 2013-04-24 18:18:39
http://jsfiddle.net/JXWfC/4/如果这匹配你想要的东西,看看这个。 另请参阅http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html教程。 – 2013-04-24 19:14:00
是的,你能否看到thead th与tbody td不一致?这里是我更新的小提琴(没有解决方案,只是在它上面):http://jsfiddle.net/JXWfC/5/ – Ryan 2013-04-24 19:22:47
为什么纯HTML/CSS一个_bust_?您的标准似乎并不苛刻。 – adamb 2013-04-24 16:33:43
@adamb,我无法使它工作。能给我看看么?从我的研究来看,这是一个普遍的问题。是的,它看起来并不是太苛刻,但是有一些重大挑战 - 1)高度总是挑战,2)溢出滚动只在表格单元显示时才起作用:阻止列的流体宽度对齐的块(可以设置每列的静态像素宽度,但不是流体百分比)。这就是我寻求js解决方案的原因。但是我很高兴在这里错了。 ;) – Ryan 2013-04-24 19:04:44
当你说你想要表格填满整个高度时,你的意思是表格单元需要垂直展开吗?例如,如果我的页面高度为900px,并且表格中只有3行,它们每个都应该是300px高?如果不是,你能澄清你需要什么吗? – DACrosby 2013-04-24 19:33:59