HTML 表格的CSS样式-隔行变色

最新推荐文章于 2024-08-23 10:02:01 发布

自律2019

最新推荐文章于 2024-08-23 10:02:01 发布

阅读量2.8k

点赞数

分类专栏： C# .NET 使用技巧

本文链接：https://blog.csdn.net/qiqingli/article/details/8627068

版权

C# .NET 使用技巧专栏收录该内容

34 篇文章 0 订阅

订阅专栏

HTML 表格的CSS样式-隔行变色

1.代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="表格样式.aspx.cs" Inherits="MyProgrammingDEMO.Pages.表格样式" %>

<!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">
        .tableClass
        {
            border: 1px solid red;
            border-collapse: collapse;
        }
        .tableClass tr td, .tableClass tr th
        {
            border: 1px solid red;
            height: 30px;
            line-height: 30px;
            font-family: 微软雅黑;
            font-size: 14px;
            color: #000000;
            text-align: center;
        }
        .tableClass tr th
        {
            background-color:Purple;
            }
        .oddtrcolor, .oddtrcolor tr td
        {
            background-color:Yellow;
        }
        .eventrcolor, .eventrcolor tr td
        {
            background-color: Lime;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>
            隔行变背景色</h2>
        <table cellpadding="0" cellspacing="0" class="tableClass" width="500px">
            <tr>
                <th>
                    列一
                </th>
                <th>
                    列二
                </th>
                <th>
                    列三
                </th>
                <th>
                    列四
                </th>
            </tr>
            <%for (int i = 1; i < 11; i++)
              { %>
            <%if (i % 2 == 0)
              {%>
            <tr class="eventrcolor">
                <%}
              else
              { %>
                <tr class="oddtrcolor">
                    <%} %>
                    <td>
                        第[<%:i %>]行第一列
                    </td>
                    <td>
                        第[<%:i %>]行第二列
                    </td>
                    <td>
                        第[<%:i %>]行第三列
                    </td>
                    <td>
                        第[<%:i %>]行第四列
                    </td>
                </tr>
                <%} %>
        </table>
    </div>
    </form>
</body>
</html>