css 固定表头 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ClassCoursePlanTestSystem.ClassPlan.WebForm1" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        .table-head{padding-right:17px;background-color:#999;color:#000;}
        .table-body{width:100%; height:300px;overflow-y:scroll;}
        .table-head table,.table-body table{width:100%;}
        .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div style="width: 800px;">
            <div class="table-head">
            <table>
                <colgroup>
                    <col style="width: 80px;" />
                    <col />
                </colgroup>
                <thead>
                    <tr><th>序号</th><th style="border:1px solid green;">内容</th></tr>
                </thead>
            </table>
            </div>
            <div class="table-body">
            <table>
                <colgroup><col style="width: 80px;" /><col /></colgroup>
                <tbody>
                    <tr><td>1</td><td>我只是用来测试的我只是用来测试的我只是用来测试的我只是用来测试的我只是用来测试的我只是用来测试的我只是用来测试的我只是用来测试的</td></tr>
                    <tr><td>2</td><td>我只是用来测试的</td></tr>
                    <tr><td>3</td><td>我只是用来测试的</td></tr>
                    <tr><td>4</td><td>我只是用来测试的</td></tr>
                    <tr><td>5</td><td>我只是用来测试的</td></tr>
                    <tr><td>6</td><td>我只是用来测试的</td></tr>
                    <tr><td>7</td><td>我只是用来测试的</td></tr>
                    <tr><td>8</td><td>我只是用来测试的</td></tr>
                    <tr><td>9</td><td>我只是用来测试的</td></tr>
                    <tr><td>10</td><td>我只是用来测试的</td></tr>
                    <tr><td>11</td><td>我只是用来测试的</td></tr>
                    <tr><td>12</td><td>我只是用来测试的</td></tr>
                    <tr><td>13</td><td>我只是用来测试的</td></tr>
                    <tr><td>14</td><td>我只是用来测试的</td></tr>
                    <tr><td>15</td><td>我只是用来测试的</td></tr>
                </tbody>
            </table>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

 

posted on 2020-04-12 10:51  空明流光  阅读(942)  评论(0)  编辑  收藏  举报

导航