如何使固定的标题表内可滚动div？

本文介绍了如何使固定的标题表内可滚动div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想让我的表头固定。表存在于可滚动div内。下面是我的代码。

I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code.

<div id="table-wrapper"> <div id="table-scroll"> <table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable"> <thead> <tr> <th>Order ID</th> <th>Order Date</th> <th>Status</th> <th>Vol Number</th> <th>Bonus Paid</th> <th>Reason for no Bonus</th> </tr> </thead> <tbody> <tr> <td><%=snd.getOrderId()%></td> <td><%=snd.getDateCaptured()%></td> <td><%=snd.getOrderStatus()%></td> <td>Data Not Available</td> <td>Data Not Available</td> <td>Data Not Available</td> </tr> </tbody> </table> </div> </div>

下面是我的CSS，我用于上面的div：

Below is my CSS, which I am using for the above div:

#table-wrapper { position:relative; } #table-scroll { height:250px; overflow:auto; margin-top:20px; } #table-wrapper table { width:100%; } #table-wrapper table * { background:white; color:black; } #table-wrapper table thead th .text { position:absolute; top:-20px; z-index:2; height:20px; width:35%; border:1px solid red; }

推荐答案

？我已经从头开始...

How about doing something like this? I've made it from scratch...

我所做的是使用2个表，一个为标题，它将始终是静态的，另一个表呈现细胞，我使用一个固定高度的 div 元素包装，并启用滚动，我使用 overflow-y：auto; code>

What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a div element with a fixed height, and to enable scroll, am using overflow-y: auto;

还要确保使用 table-layout：fixed; $ c> td 元素，以便当空格使用，因此为了使用换行：break-word;

Also make sure you use table-layout: fixed; with fixed width td elements so that your table doesn't break when a string without white space is used, so inorder to break that string am using word-wrap: break-word;

a href =jsfiddle/zS7Ny/> 演示

Demo

.wrap { width: 352px; } .wrap table { width: 300px; table-layout: fixed; } table tr td { padding: 5px; border: 1px solid #eee; width: 100px; word-wrap: break-word; } table.head tr td { background: #eee; } .inner_table { height: 100px; overflow-y: auto; } <div class="wrap"> <table class="head"> <tr> <td>Head 1</td> <td>Head 1</td> <td>Head 1</td> </tr> </table> <div class="inner_table"> <table> <tr> <td>Body 1</td> <td>Body 1</td> <td>Body 1</td> </tr> <!-- Some more tr's --> </table> </div> </div>