Question

I have a page in ASP.net that has a table that gets autogenerated based upon a datatable and shown using a Telerik RadGrid, I want the page size to remain unchanged and if the table is too wide it should have its own scroll bars.

I have tested using IE9 and Firefox and they both put a scroll bar on the page instead of the table.

if I use the web dev toolbar in IE9 and set the mode to IE7 it renders how I want with the scroll on the table!

The ASP markup code looks as follows:

<%@ Page Title="Data Audit" Language="C#" Theme="Editor" MasterPageFile="~/MasterPages/MasterPlanEditor.Master"
    AutoEventWireup="True" CodeBehind="DataAudit.aspx.cs" Inherits="IFMA.MasterPlan.Web.Modules.Administrator.DataAuditing.DataAudit" %>

<%@ Register Src="../../../Common/Controls/ContentTitleBar.ascx" TagName="ContentTitleBar"
    TagPrefix="IFMA" %>
<%@ Register Src="../../../Common/Controls/CMSSection.ascx" TagName="CMSSection"
    TagPrefix="IFMA" %>
<%@ Register Src="../../../Common/Controls/PageMessage.ascx" TagName="PageMessage"
    TagPrefix="IFMA" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
    <!-- AJAX --->
    <telerik:RadAjaxManager ID="AjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel" LoadingPanelID="AjaxLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Skin="Default" />
    <telerik:RadTabStrip ID="TabStrip" runat="server" Skin="Default">
        <Tabs>
            <telerik:RadTab Text="Data Audit" Selected="true">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <div class="BlueContentContainer">
        <div class="PaddingContentContainer">
            <IFMA:PageMessage ID="pageMessage" runat="server" />
            Please select the audit entity:
            <telerik:RadComboBox ID="cmbAuditSelection" runat="server" AllowCustomText="false"
                OnItemsRequested="cmdAuditSelection_OnItemsRequested" EnableLoadOnDemand="true"
                Width="350px" OnSelectedIndexChanged="cmbAuditSelection_OnSelectedIndexChanged"
                CausesValidation="false" AppendDataBoundItems="true" EmptyMessage="Please Select"
                AutoPostBack="true" Skin="Office2007" />
            <br />
            <br />
            <asp:Panel ID="GridPanel" BorderderStyle="Solid" BorderColor="MenuBar" ScrollBars="Auto"
                Height="98%" runat="server">
                <telerik:RadGrid ID="Grid" Skin="Office2007" AllowPaging="false" Style="width: auto"
                    ShowGroupPanel="false" runat="server" OnColumnCreated="Grid_OnColumnCreated"
                    GridLines="Both">
                    <MasterTableView AutoGenerateColumns="True" HeaderStyle-Wrap="false" ShowHeadersWhenNoRecords="false" />
                </telerik:RadGrid>
            </asp:Panel>
        </div>
    </div>
</asp:Content>

and the css

I’m going crazy trying to figure this out, I haven’t done a lot of CSS so hopefully someone here might know.

Answer 1

you can wrap the table with a

<div style="overflow:auto">

your table here

</div>