制作可滚动的表格并插入表格内边框

Question

我该怎么办？

给定下面的html编码，我如何1.）锁定第一行（表头）不滚动和2.）有一个1px固体#ccccc的内表边框

谢谢你的帮助！

杰伊

样式编码：

<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

当框出现时，您可以将标签设置为th。它将锁定鼠标滚动或使用框上的位置：固定。

Answer 2

边框样式表：

table {
position: relative;
}
table, th, td {
border: 1px solid #cccccc;
}

Answer 3

最简单的方法是使用第三方插件。看看这个：http://dlippman.imathas.com/projects/tablescroller.php或尝试datatables.net