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>1td><td>我只是用来测试的我只是用来测试的我只是用来测试的我只是用来测试的我只是用来测试的我只是用来测试的我只是用来测试的我只是用来测试的td>tr>
                    <tr><td>2td><td>我只是用来测试的td>tr>
                    <tr><td>3td><td>我只是用来测试的td>tr>
                    <tr><td>4td><td>我只是用来测试的td>tr>
                    <tr><td>5td><td>我只是用来测试的td>tr>
                    <tr><td>6td><td>我只是用来测试的td>tr>
                    <tr><td>7td><td>我只是用来测试的td>tr>
                    <tr><td>8td><td>我只是用来测试的td>tr>
                    <tr><td>9td><td>我只是用来测试的td>tr>
                    <tr><td>10td><td>我只是用来测试的td>tr>
                    <tr><td>11td><td>我只是用来测试的td>tr>
                    <tr><td>12td><td>我只是用来测试的td>tr>
                    <tr><td>13td><td>我只是用来测试的td>tr>
                    <tr><td>14td><td>我只是用来测试的td>tr>
                    <tr><td>15td><td>我只是用来测试的td>tr>
                tbody>
            table>
            div>
        div>
    div>
    form>
body>
html>

 

你可能感兴趣的:(css 固定表头)