我创建了一个表,我希望它是height
be 800px
。
如果它是溢出,我想使滚动条,但标题不滚动。
所以我尝试添加这个CSS:
overflow: scroll;
max-height:800px;
但这对我不起作用。这是整个html文件。有什么问题吗?
CSS
table{
overflow: scroll;
text-align: center;
margin: auto;
max-height:800px;
}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
和HTML
<table >
<tr>
<th>field a</th>
<th>field b</th>
<th>field c</th>
<th>field e</th>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
</table>
谢谢!
发布于 2013-11-30 05:27:02
您可以将表包装在div中,并将max-height
和overflow: scroll
提供给该div
<div class="pane">
<table>
<tr>
<th>field a</th>
<th>field b</th>
<th>field c</th>
<th>field e</th>
</tr>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
...
</table>
</div>
.pane {
display: inline-block;
overflow-y: scroll;
max-height:200px;
}
table {
text-align: center;
margin: auto;
}
在Pure CSS Scrollable Table with Fixed Header上还有另一种解决方案,没有包装器div,但在行周围添加了额外的thead
和tbody
。将thead和tbody设置为display: block
,并为tbody提供一个max-height
和overflow-y
。这样可以在滚动行时保持标题不动。但和往常一样,它也有一个价格标签。您必须指定列宽,因为标题和正文由于display: block
而不同步
<table>
<thead>
<tr>
<th>field a</th>
<th>field b</th>
<th>field c</th>
<th>field e</th>
</tr>
</thead>
<tbody>
<tr>
<td>3534534</td>
<td>עו"ש</td>
<td>6,463</td>
<td>4,000</td>
</tr>
...
</tbody>
</table>
thead {
display: block;
}
tbody {
display: block;
overflow-y: scroll;
max-height:200px;
}
thead th, tbody td {
width: 70px;
}
更新:
在该站点的源代码中,有关于IE和IE6的注释。它设置
thead tr {
position: relative
}
并定义表格的宽度。
table {
float: left;
width: 740px
}
我不知道这与IE10有什么关系。
发布于 2013-11-30 05:25:31
使用另一个元素包装整个表,并将这些属性提供给他:
#table-limiter {
max-height:800px;
overflow: scroll;
}
HTML示例:
<div id="table-limiter">
<table>
...
</table>
</div>
设计表格样式有时是一件麻烦的事:(
发布于 2013-11-30 05:27:46
这里有一种方法。
使用CSS添加一个包装div:
#set-height {
display: inline-block;
height:800px;
overflow: scroll;
}
https://stackoverflow.com/questions/20293492
复制相似问题