我一直在为 HTML/CSS 流体宽度、流体高度、固定标题表工作,但没有成功。我希望您能为我指出 JavaScript 或 jQuery 解决方案。
标准:
- 表格必须填满浏览器窗口的整个宽度(至少是容器)
- 表格必须填满浏览器窗口中可用容器的整个高度
- 如果没有足够的空间容纳所有行,则 tbody 必须滚动 y
- thead th 和 tbody td 列必须对齐
纯 HTML/CSS 是失败的。 jQuery 或 JavaScript 怎么样?
这是一个 fiddle :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;
。这需要相当多的额外代码才能正确定位,但这是使标题始终保持不变且表格单元格滚动的不错方法。
或者,您可以将标题设为独立于表格的 div,但您仍需要设置宽度,以便列对齐。一匹马,真的。
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; }
关于jquery - 如何使用 jQuery 制作宽度可变、高度可变、固定的标题表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16197374/