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

2010-12-09 12:00:11 549 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

前端必知必会-响应式网页设计Viewport和GridView viewport是用户在网页上的可见区域。viewport随设备而变化，在手机上比在电脑屏幕上小。在平板电脑和手机出现之前，网页仅针对电脑屏幕设计，网页通常采用静态设计和固定大小。然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大而无法适应viewport。为了解决这个问题，这些设备上的浏览器会缩小整个网页以适应屏幕。这并不完美！！但这是一个快速解决方案。许多网页都基于GridView，这意味着页面被分成几列：在设计网页时，使用GridView非常有用。它使在页面上放置元素变得更容易。阅读详情

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>