table里的gridview增加水平滚动条

Question

   table中的panle里的gridview增加水平滚动条怎么不行啊？
因为gridview中的字段较多，导致table中的其他td列变形，如何保持不变形呢？
       

Answer 1

table里套GV？什么意思？gv是table某个单元格内的东西？如果那样建议用frame,如果gv是table某些部分的单元格，那建议你不要这么搞啊，太乱了

Answer 2

嗯，是的，我是table里嵌套GV，GV是在table的某一td列中。
假如用iframe，那如何显示数据呢？对iframe操作不熟练，求指点啊

Answer 3

能不能给外面套个DIV，然后给Div加滚动条呢？

Answer 4

gridview中实际是没有滚动条的，所以特地在外围增加了 panel控件，但是因为gridview中的字段名较多，会导致整个网页变形。对于div，我也设置属性 overflow：auto，但是一样的情况。请高手指点啊

Answer 5

我去找找我以前给Div加的滚动条的代码，稍等哦~

Answer 6

好的谢谢了啊。gridview如何不放在table中 使用panel或者div实现滚动条都可以，但是一旦放在table中就有问题了

Answer 7

.scroll
{
     overflow: scroll; 
     overflow-x: hidden; 
     scrollbar-shadow-color: #2288FF;
     scrollbar-highlight-color: #2288FF; 
     scrollbar-arrow-color: #2288FF; 
     scrollbar-face-color: #FFFFFF;
     scrollbar-track-color: #FFFFFF; 
     scrollbar-3dlight-color: #FFFFFF; 
     scrollbar-darkshadow-color: #2288FF;
     scrollbar-track-color: #6688FF;
}
这个隐藏了横向的滚动条，下面的这些颜色都是调整滚动条样式的。
但愿对楼主有帮助。

Answer 8

把table的这个单元格，还有中间的div都给定大小~

Answer 9

可以贴出来这一块的table代码吗？

Answer 10

我想要的结果类似 CSDN的论坛首页，左边是“个人信息栏”，中间有个“隐藏侧边栏”，右边是显示的内容。
当点击“隐藏”或者“显示”时，右边内容伸缩。同时在右边内容中，若超出当前页面大小，则用滚动条显示

Answer 11

我的页面就是这么设计的，带了妳说的深锁功能~
上面div，下半部分一个一行三列的table，左边是菜单，中间是点击收缩的一个细长的条，右边是ContentPlaceHolder
这个页面是母版页~

Answer 12

        <table border="0" cellspacing="0" cellpadding="0" id="main_table" style="width:100%; height:100%" >
            <tr>
                <td valign="top" id="menu">
                    <div id="menu_out">
                        <a href="../Equipment/EquipmentList.aspx"class="home">管理首页</a> <a id="exitLogin" href="../Default.aspx" class="exit">退出系统</a>
                    </div>
                    <div id="menu_div">
                        <div id="menu_top">
                            <span></span><a></a>
                        </div>
                        <div runat="server" id="menu_all" style="text-align:left; padding-left:10px;">
                            <asp:TreeView ID="TreeView1" runat="server"  CssClass="IE8Fix"
                                 Width="100%" ImageSet="Arrows" >
                                <SelectedNodeStyle Font-Underline="True" ForeColor="White" />
                                <Nodes>                                </Nodes>
                                <NodeStyle Font-Size="10pt" ForeColor="DarkBlue"
                                  HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
                            </asp:TreeView>
                        </div>
                    </div>
                </td>
                <td valign="top" id="switch">
                    <div id="switch_out"></div>
                    <div id="switch_go"></div>
                </td>
                <td valign="top"> 
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"  >
                    </asp:ContentPlaceHolder>   
                </td>
            </tr>
          </table>

Answer 13

这部分代码没有什么问题呀，然后给子页面加上div和滚动条试试呗~

Answer 14

下面是子页面的内容，因为字段比较多，且要全部显示出来，所以导致table变形且中间的“隐藏”栏位没有了，另外虽然框内有滚动条，但是不起作用。
 <div id="main" style="text-align:center;" >
        <div id="nav" style="text-align:left;">
            <a href="#">设备管理系统</a> > <a href="#">设备管理</a> > <a href="#">设备明细</a>
        </div>
          <div class="left">
          <asp:Panel ID="Panel1" runat="server" ScrollBars="Horizontal" CssClass="leftDistance">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
            <ContentTemplate>
                  <asp:GridView ID="gv_equDetails" runat="server" AutoGenerateColumns="false" 
                      AllowPaging="true" GridLines="None" CellPadding="4"
                      onpageindexchanging="gv_equDetails_PageIndexChanging">
                      <RowStyle BackColor="#F0F0F0" Font-Size="9pt" />
                    <Columns>
                     <asp:TemplateField HeaderText="Rack Label Info" >
                            <ItemTemplate>
                                <asp:Label ID="lblPackLable" runat="server" Text='<%# Eval("testerRack.PackLabelInfo") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false" />
                            <ItemStyle HorizontalAlign="Center" Wrap="false" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Tester">
                            <ItemTemplate>
                                <asp:Label ID="lblTester" runat="server" Text='<%# Eval("testerRack.Tester") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false" />
                            <ItemStyle HorizontalAlign="Left"  Wrap="false"/>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Equipment Name">
                            <ItemTemplate >
                                <asp:Label ID="lblEquipmentName" runat="server" Text='<%# Eval("testerRack.EquipmentName") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"  />
                            <ItemStyle HorizontalAlign="Left" Wrap="false" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Model">
                            <ItemTemplate>
                                <asp:Label ID="lblModel" runat="server" Text='<%# Eval("testerRack.Model") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"  />
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Serial No.">
                            <ItemTemplate>
                                 <asp:Label ID="lblSerialNo" runat="server" Text='<%# Eval("testerRack.SerialNo") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"  />
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                       <asp:TemplateField HeaderText="Calibration Type">
                            <ItemTemplate>
                                <asp:Label ID="lblCalibrationType" runat="server" Text='<%# Eval("equipDetails.CalibrationType") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"  />
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Frequency">
                            <ItemTemplate>
                                <asp:Label ID="lblFrequency" runat="server" Text='<%# Eval("equipDetails.Frequency") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"  />
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Cert.Status">
                            <ItemTemplate>
                                <asp:Label ID="lblCertStatus" runat="server" Text='<%# Eval("equipDetails.CertStatus") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"  />
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Cal Label By">
                            <ItemTemplate>
                                <asp:Label ID="lblCaliLabel" runat="server" Text='<%# Eval("equipDetails.CaliLabel") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"  />
                            <ItemStyle HorizontalAlign="Left" Wrap="false" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Waiver No."> 
                            <ItemTemplate>
                                <asp:Label ID="lblWaiverNo" runat="server" Text='<%# Eval("equipDetails.WaiverNo") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"  />
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Cal Date">
                            <ItemTemplate>
                                <asp:Label ID="lblCaliDate" runat="server" Text='<%# Eval("equipDetails.CaliDate") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false" />
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Due Date">
                            <ItemTemplate>
                                <asp:Label ID="lblDueDate" runat="server" Text='<%# Eval("equipDetails.DueDate") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false" />
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Alarm">
                            <ItemTemplate>
                                <asp:Label ID="lblAlarm" runat="server" Text='<%# Eval("equipDetails.Alarm") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false" />
                            <ItemStyle HorizontalAlign="Left" Wrap="false" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="PCL Asset No.">
                            <ItemTemplate>
                                <asp:Label ID="lblAssertNo" runat="server" Text='<%# Eval("equipDetails.AssertNo") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"/>
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Custom No.">
                            <ItemTemplate>
                                <asp:Label ID="lblCustomNo" runat="server" Text='<%# Eval("equipDetails.CustomNo") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"  />
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Re">
                            <ItemTemplate>
                                <asp:Label ID="lblRe" runat="server" Text='<%# Eval("equipDetails.Re") %>'></asp:Label>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" Wrap="false"  />
                            <ItemStyle HorizontalAlign="Left" Wrap="false"/>
                        </asp:TemplateField>
                    </Columns>
                    <HeaderStyle BackColor="#1F86CB" Font-Bold="True" ForeColor="White" />
                    <EditRowStyle BackColor="#7C6F57" />
                    <PagerStyle BackColor="#1F86CB" HorizontalAlign="Center" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                  </asp:GridView>
             
            </ContentTemplate>
        </asp:UpdatePanel>
      </asp:Panel>
      </div>
    </div>

Answer 15

下面的Div的样式是什么，我有点儿不明白这个Panel的作用是什么？

Answer 16

哦，DIV的样式很简单，
 padding-left:20px;
     margin:10px 0px 1px 0px;
Panel的作用其实和 div中css {overflow：auto}类似的。因为刚开始用div实现不行，所以后来我又加了一个panel

Answer 17

这个是我td里面的代码
<td style="vertical-align: top; text-align: center;" width="210px">
                <div class="List scroll">
                    <%
                        if (ds != null && ds.Tables[0].Rows.Count > 0)
                        {
                            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                            {
                                if (lsjk)
                                {
                    %>
                    <div id="Div1" class="mini" onclick="ShowCurrentLocationPoint('<%=ds.Tables[0].Rows[i]["DGUID"].ToString() %>')">
                        <div class="text">
                            <strong>
                                <%=ds.Tables[0].Rows[i]["DNAME"].ToString() %>
                            </strong>
                        </div>
                    </div>
                    <%                                    
}
                                else
                                {
                    %>
                    <div id="Div01" class="lsjkOFF">
                        <div class="text">
                            <strong>
                                <%=ds.Tables[0].Rows[i]["DNAME"].ToString() %>
                            </strong>
                        </div>
                    </div>
                    <% 
}
                                if (ssjk)
                                {                                    
                    %>
                    <div class="miniHistory" id="Div2" onclick="ShowHistoryLocationPoint('<%=ds.Tables[0].Rows[i]["DGUID"].ToString() %>')">
                        <div class="text">
                            <strong>
                                <%=ds.Tables[0].Rows[i]["DNAME"].ToString() %>
                            </strong>
                        </div>
                    </div>
                    <%        
                        }
                                else
                                {
                    %>
                    <div class="ssjkOFF" id="Div02">
                        <div class="text">
                            <strong>
                                <%=ds.Tables[0].Rows[i]["DNAME"].ToString()%>
                            </strong>
                        </div>
                    </div>
                    <%
                        }
                            }
                        }
                    %>
                </div>
            </td>
我没有用panel，里面用循环生成了一些小的div元素，超过了，scroll的样式在之前给妳贴过了~

Answer 18

嗯，其实那个panel用不用无所谓，可以直接用div控制下就可以了，
我再试试看看吧，哎，不过还是谢谢你的帮忙啊

Answer 19

嗯，这个基础的是知道的。另外，好似vs里没有overflow-x 或overflow-y属性吧。
等我问题搞定，给分这个必须的，呵呵

Answer 20

建议用ie10或者chrome的调试工具分析页面呈现，然后修改自定义的样式以控制滚动条的呈现。工具如何使用参考baidu或google

Answer 21

style="overflow-x: scroll; width: 100%;"

Answer 22

Hi,这种方法不在镶嵌在table都OK的，一旦镶嵌在里，水平滚动条是 无效的啊

Answer 23

td中加div，不知道是我的css写的有问题，还是怎么回事，Gridveiw外的div水平滚动条无效，垂直滚动条 是可用的，但是我只想要水平滚动条

Answer 24

呵呵，问题解决了，只是后来一直忙，所以没有上来回复。
原因找到了，很简单的，是我太大意了，母版里有个div其设置css{overflow:hidden}，所以导致一直没有滚动条~~~ 。另外关于td变形的问题，我在母版里设置了一下css{postion：absolute}，这样就不会变形了。
感谢各位的帮忙

Answer 25

哈哈，欲哭无泪啊最后没办法，把那块代码全部移植出来一点点debug，伤不起啊。