首页 > Web开发 > 详细

css 固定表头

时间:2020-04-12 11:27:13      阅读:60      评论:0      收藏:0      [点我收藏+]
<%@ 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>

 

css 固定表头

原文:https://www.cnblogs.com/nanfei/p/12684098.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!