Browser compatibility issues for CSS to implement scrollable tables with fixed headers_html/css

Browser compatibility issues for CSS to implement scrollable tables with fixed headers_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:25:47

Original

1868 people have browsed it

I want to make a table with a fixed header and a scrollable table body. An example found from the Internet is as follows:

http://www.imaputz.com/cssStuff/bigFourVersion.html
http://stackoverflow.com/questions/13043837/scrollable-table-with- fixed-header

After adjustment, it works well in Firefox, Chrome and IE10, but not in IE8, IE9 and IE11. The symptom is that the tboytboy part cannot be scrolled (no scroll bar). The container outside the table can have scroll bars, but the table header will scroll together with the table body.

Is there any good way to solve this browser compatibility issue? Thanks!

(Take a week off from tomorrow, check out when you come back)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style>*{	margin:0;	padding:0;	}div.tableContainer {    clear: both;    border: 0px solid #963;    height: 420px; /* html>body tbody.scrollContent height plus 23px for the header */    overflow: auto;    width: 756px /* Remember to leave 16px for the scrollbar! */}/* define width of table. IE browsers only                 */div.tableContainer table {	float: left;	width: 740px;	border-collapse:collapse;	border: 1px solid #76a0ae;	background-color: #ddd2e5;}div.tableContainer table tr{	height:33px;}/*html>body */tbody.scrollContent {	margin-top:10px;    display: block;    height: 352px;    overflow: auto;    width: 100%;	background-color: #eeeeee;}tbody td {    height: 32px;}/*html>body */thead.fixedHeader tr {    display: block;	background-color: #ddd2e5;}/*html>body */thead.fixedHeader th { /* TH 1 */	border: 1px solid #76a0ae;    width: 180px;	height:40px;}/*html>body */thead.fixedHeader th + th { /* TH 2 */    width: 240px;}/*html>body */thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */    width: 336px;}/*html>body */tbody.scrollContent td { /* TD 1 */	border: 1px solid #76a0ae;    width: 180px;	height:33px;}/*html>body */tbody.scrollContent td + td { /* TD 2 */    width: 240px;}/*html>body */tbody.scrollContent td + td + td { /* TD 3 +16px for scrollbar */    width: 320px;}</style></head><body><h1>Pure CSS Scrollable Table with Fixed Header</h1><p>Using CSS to allow scrolling within a single HTML table</p><br /><br /><div id="tableContainer" class="tableContainer"><table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">    <thead class="fixedHeader">        <tr class="alternateRow">            <th><a href="#">Header 1</a></th>            <th><a href="#">Header 2</a></th>            <th><a href="#">Header 3</a></th>        </tr>    </thead>    <tbody class="scrollContent">        <tr>            <td>Cell Content 1 1</td>            <td>Cell Content 1 2</td>            <td>Cell Content 1 3</td>        </tr>        <tr>            <td>Cell Content 2 1</td>            <td>Cell Content 2 2</td>            <td>Cell Content 2 3</td>        </tr>        <tr>            <td>Cell Content 3 1</td>            <td>Cell Content 3 2</td>            <td>Cell Content 3 3</td>        </tr>        <tr>            <td>Cell Content 4 1</td>            <td>Cell Content 4 2</td>            <td>Cell Content 4 3</td>        </tr>        <tr>            <td>Cell Content 5 1</td>            <td>Cell Content 5 2</td>            <td>Cell Content 5 3</td>        </tr>        <tr>            <td>Cell Content 6 1</td>            <td>Cell Content 6 2</td>            <td>Cell Content 6 3</td>        </tr>        <tr>            <td>Cell Content 7 1</td>            <td>Cell Content 7 2</td>            <td>Cell Content 7 3</td>        </tr>        <tr>            <td>Cell Content 8 1</td>            <td>Cell Content 8 2</td>            <td>Cell Content 8 3</td>        </tr>        <tr>            <td>Cell Content 9 1</td>            <td>Cell Content 9 2</td>            <td>Cell Content 9 3</td>        </tr>        <tr>            <td>Cell Content 10 1</td>            <td>Cell Content 10 2</td>            <td>Cell Content 10 3</td>        </tr>        <tr>            <td>Cell Content 11 1</td>            <td>Cell Content 11 2</td>            <td>Cell Content 11 3</td>        </tr>        <tr>            <td>Cell Content 12 1</td>            <td>Cell Content 12 2</td>            <td>Cell Content 12 3</td>        </tr>        <tr>            <td>Cell Content 13 1</td>            <td>Cell Content 13 2</td>            <td>Cell Content 13 3</td>        </tr>        <tr>            <td>Cell Content 14 1</td>            <td>Cell Content 14 2</td>            <td>Cell Content 14 3</td>        </tr>        <tr>            <td>Cell Content 15 1</td>            <td>Cell Content 15 2</td>            <td>Cell Content 15 3</td>        </tr>    </tbody></table></div></body></html>

Copy after login