I want to lớn avoid adding some additional div, all I want is simple table like this và when I trying lớn change display, table-layout, position and much more things in CSS table not working good with 100% width only with fixed width in px.Bạn đang xem: How khổng lồ set tbody height with overflow scroll
In order to lớn make element scrollable, we need to change the way it"s displayed on the page i.e. Using display: block; to display that as a block màn chơi element.
Since we change the display property of tbody, we should change that property for thead element as well to prevent from breaking the table layout.
So we have:
thead, tbody display: block; tbody height: 100px; /* Just for the kiểm tra */ overflow-y: auto; /* Trigger vertical scroll */ overflow-x: hidden; /* Hide the horizontal scroll */Web browsers display the thead and tbody elements as row-group (table-header-group và table-row-group) by default.
Once we change that, the inside tr elements doesn"t fill the entire space of their container.
Here is the jQuery version of above logic:
// Change the selector if neededvar $table = $("table"), $bodyCells = $table.find("tbody tr:first").children(), colWidth;// Get the tbody columns width arraycolWidth = $bodyCells.map(function() return $(this).width();).get();// set the width of thead columns$table.find("thead tr").children().each(function(i, v) $(v).width(colWidth);); & here is the output đầu ra (on Windows 7 Chrome 32):
WORKING DEMO.Full Width Table, Relative Width Columns
As the Original Poster needed, we could expand the table to 100% of width of its container, and then using a relative (Percentage) width for each columns of the table.
table width: 100%; /* Optional */tbody td, thead th width: 20%; /* Optional */Since the table has a (sort of) fluid layout, we should adjust the width of thead columns when the container resizes.
Hence we should phối the columns" widths once the window is resized:
// Adjust the width of thead cells when *window* resizes$(window).resize(function() /* Same as before */ ).resize(); // Trigger the resize handler once the script runsThe output would be:
WORKING DEMO.Browser support and Alternatives
I"ve tested the two above methods on Windows 7 via the new versions of major website Browsers (including IE10+) và it worked.
However, it doesn"t work properly on IE9 và below.
That"s because in a table layout, all elements should follow the same structural properties.
By using display: block; for the & elements, we"ve broken the table structure.
For instance, take a look at the following examples:
This approach uses two nested tables with a containing div. The first table has only one cell which has a div, & the second table is placed inside that div element.
Check the Vertical scrolling tables at CSS Play.
Table with fixed header on scroll
Since the purpose of adding vertical scroll bar to the is displaying the table header at the đứng đầu of each row, we could position the thead element lớn stay fixed at the top of the screen instead.
Here is a Working Demo of this approach performed by Julien.It has a promising web browser support.
And here a pure CSS implementation by Willem Van Bockstal.The Pure CSS Solution
Here is the old answer. Of course I"ve added a new method và refined the CSS declarations.
Table with Fixed Width
In this case, the table should have a fixed width (including the sum of columns" widths and the width of vertical scroll-bar).
Each column should have a specific width & the last column of thead element needs a greater width which equals to the others" width + the width of vertical scroll-bar.
Therefore, the CSS would be:
table width: 716px; /* 140px * 5 column + 16px scrollbar width */ border-spacing: 0;tbody, thead tr display: block; tbody height: 100px; overflow-y: auto; overflow-x: hidden;tbody td, thead th width: 140px;thead th:last-child width: 156px; /* 140px + 16px scrollbar width */Here is the output:
Table with 100% Width
In this approach, the table has a width of 100% & for each th and td, the value of width property should be less than 100% / number of cols.
Also, we need to lớn reduce the width of thead as value of the width of vertical scroll-bar.
In order to vị that, we need khổng lồ use CSS3 calc() function, as follows:
table width: 100%; border-spacing: 0;thead, tbody, tr, th, td display: block; thead tr /* fallback */ width: 97%; /* minus scroll bar width */ width: -webkit-calc(100% - 16px); width: -moz-calc(100% - 16px); width: calc(100% - 16px);tr:after /* clearing float */ content: " "; display: block; visibility: hidden; clear: both;tbody height: 100px; overflow-y: auto; overflow-x: hidden;tbody td, thead th width: 19%; /* 19% is less than (100% / 5 cols) = 20% */ float: left;Here is the Online Demo.
Note: This approach will fail if the content of each column breaks the line, i.e. the nội dung of each cell should be short enough.
In the following, there are two simple example of pure CSS solution which I created at the time I answered this question.