gridview的固定宽度和百分比宽度问题

unicode 2010-12-09 12:00:11

gridview生成的两个table, 第一个有5列，宽度是container的100%，第二个有两列，宽度是40%。两个table在最左边都加了一个带checkbox的列，宽度是20px。第一个table的显示效果是我需要的，但是第二个怎么才能让它的col1, col2和第一个的col1,col2对齐呢？



<html xmlns="http://www.w3.org/1999/xhtml">

<head><title></title>

    <style type="text/css">

        .gvSelect

        {

            width:20px;

            background-color:#cccccc;

        }

        .gvColumn

        {

            text-align:left;

            width:20%;

            background-color:#cccccc;

        }

    </style>

</head>

<body>

<form name="form1">

    <div class="container">

        <div style="width:100%">

            <table cellspacing="0" rules="all" border="1" style="border-color:#E6E6E6;width:100%;border-collapse:collapse;">

                <tr>

                    <th class="gvSelect" scope="col"><input type="checkbox"/></th>

                    <th class="gvColumn" scope="col">col 1</th>

                    <th class="gvColumn" scope="col">col 2</th>

                    <th class="gvColumn" scope="col">col 3</th>

                    <th class="gvColumn" scope="col">col 4</th>

                    <th class="gvColumn" scope="col">col 5</th>

                </tr>

                <tr style="height:20px;">

                    <td><input type="checkbox" /></td>

                    <td>row 1</td>

                    <td>data</td>

                    <td colspan="2">data</td>

                    <td>data</td>

                </tr>

                <tr style="height:20px;">

                    <td><input type="checkbox" /></td>

                    <td>row 2</td>

                    <td>data</td>

                    <td colspan="2">data</td>

                    <td>data</td>

                </tr>

            </table>

        </div>

        <div style="margin-top:10px; width:100%">

            <div style="width:40%">

                <table cellspacing="0" rules="all" border="1" style="border-color:#E6E6E6;width:100%;border-collapse:collapse;">

                    <tr>

                        <th class="gvSelect" scope="col"><input type="checkbox"/></th>

                        <th class="gvColumn" scope="col">col 1</th>

                        <th class="gvColumn" scope="col">col 2</th>

                    </tr>

                    <tr style="height:20px;">

                        <td><input type="checkbox" /></td>

                        <td>data</td>

                        <td>data</td>

                    </tr>

                </table>

            </div>

        </div>

    </div>             

</form>

</body>

</html>