Question

如何使gridview标题前白色和标题列分隔符在gridview中具有黑色

<asp:GridView ID="GVProformainvoice" runat="server" AutoGenerateColumns="false" Width="701px" HeaderStyle-BackColor="#3B4E87" HeaderStyle-BorderColor="Black" HeaderStyle-BorderWidth="2px">
            <HeaderStyle BorderColor="black" ForeColor="white"/>

Answer 1

您好我的示例是针对前端解决方案，对您来说这是一个非常简单的示例，希望通过使用带有CSS的JavaScript来实现它，

PS：顺便说一下，你可以将Css添加到gridview，这是更容易的方法来处理你的前端问题。检查GridView group rows and change color，如果您想使用后端解决方案。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb3212">
    <title></title>

    <script type="text/javascript">
                window.onload = function color(){
                var table = document.getElementById("person");
                var rows = table.getElementsByTagName("tr");
                for(var i = 0; i < rows.length; i++){
                    if(i % 2 == 0){
                        rows[i].style.backgroundColor = "#EAF2D3";
                    }
                    else{
                        rows[i].style.backgroundColor = "White";
                    }
                }
            }
    </script>

    <style type="text/css">
        #person {
            border-style: 1px solid;
            border-color: blue;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            margin: auto;
        }

            #person th {
                border: 1px solid;
                padding: 3px 7px 2px 7px;
                background-color: #A7C942;
                color: #ffffff;
                text-align: center;
            }

            #person td {
                border-style: solid;
                border-width: 1px;
                text-align: center;
            }
    </style>
</head>
<body>
    <table id="person" align="center" width="90%" height="200">
        <tr>
            <th>name</th>
            <th>phone</th>
        </tr>
        <tr>
            <td>aa</td>            
            <td>33333333</td>

        </tr>
        <tr>
            <td>bb</td>            
            <td>44444444</td>            
        </tr>
        <tr>
            <td>cc</td>            
            <td>55555555</td>                
        </tr>
        <tr>
            <td>dd</td>
            <td>66666666</td>                
        </tr>
    </table>
</body>
</html>



Only CSS    

<table class="myTable">
    <tbody>
        <tr><td>aa</td><td>aa</td></tr>
        <tr><td>bb</td><td>bb</td></tr>
        <tr><td>cc</td><td>cc</td></tr>
        <tr><td>dd</td><td>dd</td></tr>
        <tr><td>ee</td><td>ee</td></tr>
    </tbody>
</table>

<style>
    .myTable {
        border: 1px solid black;
    }

        .myTable tr:nth-child(even) {
            background: #CCC;
        }

        .myTable tr:nth-child(odd) {
            background: #FFF;
        }
</style>

colur和header列的标题separatpor在gridview中应该有不同的colurs

1 个答案: