html - 制作可滚动表格并插入内部表格边框

Question

我该怎么办？

鉴于下面的 html 编码，我怎样才能 1.) 锁定第一行(表格标题)防止滚动和 2.) 有一个 1px 实心表格内边框 #cccccc

感谢您的帮助!

周杰伦

样式编码:

<style type="text/css">
div#data_container {
width: 800px;
height: 75px;
overflow: auto;
border: 1px solid #cccccc;

}
table#data_tbl {
  border-collapse: collapse;
  table-layout: fixed;
}
table#data_tbl td {
  border: 0px;
}
table#data_tbl tr:first-child td { 
color: #235A81;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
}
</style>

正文:

<!-- START OF DATA CONTAINER -->
<div id="data_container">

    <table id="data_tbl">
        <td>File Number</td>
        <td>Date Received</td>
        <td>Request Type</td>
        <td>Name</td>
        <tr>
            <td>12345678</td>
            <td>08/01/2013</td>
            <td>Billing</td>
            <td>Joe Smith</td>
        </tr>
        <tr>
            <td>09876543</td>
            <td>09/01/2013</td>
            <td>Technical</td>
            <td>Nancy Edwards</td>
        </tr>
        <tr>
            <td>11223344</td>
            <td>10/01/2013</td>
            <td>Operations</td>
            <td>Jill White</td>
        </tr>
        <tr>
            <td>45678931</td>
            <td>12/01/2013</td>
            <td>Billing</td>
            <td>Michael Burns</td>
        </tr>
        <tr>
            <td>85239975</td>
            <td>09/01/2013</td>
            <td>Support</td>
            <td>Debbie Stewart</td>
        </tr>
        <tr>
            <td>55667788</td>
            <td>11/01/2013</td>
            <td>Administrative</td>
            <td>David Adams</td>
        </tr>
    </table>
</div>
<!-- END OF DATA CONTAINER -->

Answer 1

最简单的方法是使用第 3 方插件。检查一下:http://dlippman.imathas.com/projects/tablescroller.php或者试试 datatables.net