[英]Max-Height in Html Table
I create a table, and I want it's height
be 800px
.我创建了一个表格,我希望它的
height
为800px
。
If it's overflow, I want to make Scroll Bar but the Titles does not scroll.如果它溢出,我想制作滚动条但标题不滚动。
So I try to add this CSS:所以我尝试添加这个 CSS:
overflow: scroll;
max-height:800px;
But it's not work for me.但这对我不起作用。 This is the entire html file.
这是整个 html 文件。 What is the problem?
问题是什么?
CSS 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;
}
And HTML和 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>
Thanks!!!谢谢!!!
You can wrap the table in a div and give the max-height
and overflow: scroll
to that div您可以将表格包装在一个 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;
}
There's another solution at Pure CSS Scrollable Table with Fixed Header without a wrapper div, but with an additional thead
and tbody
around the rows. Pure CSS Scrollable Table with Fixed Header有另一个解决方案,没有包装器 div,但在行周围有一个额外的
thead
和tbody
。 You set the thead and tbody to display: block
and give a max-height
and overflow-y
to the tbody.您将 thead 和 tbody 设置为
display: block
并为 tbody 提供一个max-height
和overflow-y
。 This lets the header stay in place when scrolling the rows.这让标题在滚动行时保持原位。 But as always, it comes with a price tag.
但与往常一样,它带有价格标签。 You have to specify the column widths, because the thead and tbody are out of sync due to the
display: block
您必须指定列宽,因为由于
display: block
导致 thead 和 tbody 不同步
<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;
}
Update:更新:
In the source code of that site, there are comments about IE and IE6.在那个站点的源代码中,有关于IE和IE6的评论。 It sets
它设置
thead tr {
position: relative
}
and defines the width of the table with并定义表格的宽度
table {
float: left;
width: 740px
}
Wheter this is relevant for IE10, I don't know.这是否与 IE10 相关,我不知道。
Use another element to wrap the whole table, and give those properties to him:使用另一个元素来包装整个表格,并将这些属性提供给他:
#table-limiter {
max-height:800px;
overflow: scroll;
}
HTML example: HTML 示例:
<div id="table-limiter">
<table>
...
</table>
</div>
Styling table is, sometimes, a trouble :(样式表有时是一个麻烦:(
Here's one approach.这是一种方法。
Add a wrapping div with CSS:使用 CSS 添加一个包装 div:
#set-height {
display: inline-block;
height:800px;
overflow: scroll;
}
Fiddle: http://jsfiddle.net/JmLFz/小提琴: http : //jsfiddle.net/JmLFz/
Wrap the table in a div tag and set the height of the div to 800px with an overflow set to auto.将表格包裹在 div 标签中,并将 div 的高度设置为 800 像素,并将溢出设置为自动。
<div style="height:800px; overflow:auto;">
//Table goes here
</div>
Then if your table height is more than 800px a scroll bar will appear in the div and allow you to scroll through the table.然后,如果您的表格高度超过 800 像素,div 中将出现一个滚动条,并允许您滚动表格。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.