I create a table, and I want it's height
be 800px
.
If it's overflow, I want to make Scroll Bar but the Titles does not scroll.
So I try to add this CSS:
overflow: scroll;
max-height:800px;
But it's not work for me. This is the entire html file. What is the problem?
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
<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 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. You set the thead and tbody to display: block
and give a max-height
and overflow-y
to the tbody. 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
<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. 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.
Use another element to wrap the whole table, and give those properties to him:
#table-limiter {
max-height:800px;
overflow: scroll;
}
HTML example:
<div id="table-limiter">
<table>
...
</table>
</div>
Styling table is, sometimes, a trouble :(
Here's one approach.
Add a wrapping div with CSS:
#set-height {
display: inline-block;
height:800px;
overflow: scroll;
}
Fiddle: 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 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.