HOW TO SET TBODY HEIGHT WITH OVERFLOW SCROLL

table width: 100%; display:block;thead display: inline-block; width: 100%; height: 20px;tbody height: 200px; display: inline-block; width: 100%; overflow: auto; Head 1 Head 2 Head 3 Head 4 Head 5 Content 1 Content 2 Content 3 Content 4 Content 5

I want to avoid adding some additional div, all I want is simple table like this & when I trying to 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 to set tbody height with overflow scroll


*

*

In order to lớn make element scrollable, we need to lớn change the way it"s displayed on the page i.e. using display: block; khổng lồ display that as a bloông chồng level element.

Since we change the display property of tbody toàn thân, we should change that property for thead element as well khổng lồ prsự kiện from breaking the table layout.

So we have:

thead, tbody display: block; tbody height: 100px; /* Just for the chạy thử */ overflow-y: auto; /* Trigger vertical scroll */ overflow-x: hidden; /* Hide the horizontal scroll */Web browsers display the thead và tbody toàn thân elements as row-group (table-header-group and table-row-group) by mặc định.

Once we change that, the inside tr elements doesn"t fill the entire space of their container.

In order to lớn fix that, we have khổng lồ calculate the width of tbody columns and apply the corresponding value to the thead columns via JavaScript.

Auto lớn Width Columns

Here is the jQuery version of above sầu logic:

// Change the selector if neededvar $table = $("table"), $bodyCells = $table.find("ttoàn thân tr:first").children(), colWidth;// Get the ttoàn thân 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);); And here is the output (on Windows 7 Chrome 32):

*

WORKING DEMO.

Full Width Table, Relative Width Columns

As the Original Poster needed, we could expand the table lớn 100% of width of its container, and then using a relative (Percentage) width for each columns of the table.

table width: 100%; /* Optional */ttoàn thân 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 set 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 reform size 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 Web Browsers (including IE10+) và it worked.

However, it doesn"t work properly on IE9 & 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 sầu broken the table structure.

Rethiết kế layout via JavaScript

One approach is to lớn rekiến thiết the (entire) table layout. Using JavaScript to create a new layout on the fly & handle and/or adjust the widths/heights of the cells dynamically.

Xem thêm: Mách Bạn Cách Sửa Lỗi Usb Bị Ẩn File, Cách Khắc Phục Usb Bị Ẩn File Trở Lại Bình Thường

For instance, take a look at the following examples:

Nesting tables

This approach uses two nested tables with a containing div. The first table has only one cell which has a div, and the second table is placed inside that div element.

Chechồng the Vertical scrolling tables at CSS Play.

This works on most of website browsers. We can also bởi the above sầu ngắn gọn xúc tích dynamically via JavaScript.

Table with fixed header on scroll

Since the purpose of adding vertical scroll bar to lớn the is displaying the table header at the top of each row, we could position the thead element to 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 tư vấn.

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 và the width of vertical scroll-bar).

Each column should have a specific width và 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:

*

WORKING DEMO.

Table with 100% Width

In this approach, the table has a width of 100% and for each th and td, the value of width property should be less than 100% / number of cols.

Also, we need khổng lồ reduce the width of thead as value of the width of vertical scroll-bar.

In order lớn vị that, we need lớn use CSS3 calc() function, as follows:

table width: 100%; border-spacing: 0;thead, tbody, tr, th, td display: block; thead tr /* fallbaông xã */ 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 toàn thân height: 100px; overflow-y: auto; overflow-x: hidden;ttoàn thân 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.