Как сделать прокрутку определенного элемента, а не всю страницу?

Question

У меня были проблемы до того, как конкретные элементы управления будут охватывать ширину экрана и создать горизонтальную полосу прокрутки. Простое включение элемента управления в <div style="overflow:auto;"> исправит его так, что будет просто прокручиваться содержимое этого div.

Вот что я получаю:

Вся страница имеет горизонтальную полосу прокрутки, так что если вы перечисляете, чтобы увидеть все содержимое GRID ты больше не может видеть параметры поиска в таблице выше этого.

Таблица, содержащая сетку в скриншоте создается как например:

<div id="divPageControls" style="padding-right:0px; padding-bottom:15px"> 

<!-- the table(s) for the 'top half' of the application --> 

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="clsBorderColor" style="LEFT:10px; POSITION:relative; TOP:10px;"> 
    <tr> 
     <td height="5px"> 
     </td> 
    </tr> 
    <tr> 
     <td valign="top" align="center"> 
     <div style="overflow:auto;width:100%;"> 
      <asp:datagrid id="dgAuditlog" runat="server" HeaderStyle-CssClass="clsGridHeaderText" ItemStyle-CssClass="clsGridCellText" PageSize="10" bodyHeight="220px" width="98%" CssClass="tblScroll"> 
       <Columns> 
        <asp:TemplateColumn HeaderText="Select" ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="clsGridHeaderText" ItemStyle-Wrap="False" HeaderStyle-Wrap="False"> 
         <ItemTemplate> 
          <input type="checkbox" tabindex="-1" /> 
         </ItemTemplate> 
        </asp:TemplateColumn> 
       </Columns> 
      </asp:datagrid> 
     </div> 
     </td> 
    </tr> 
    <tr> 
     <td height="5px"></td> 
    </tr> 
</table> 
</div> 

Я пытался двигаться, что div вокруг упаковывают только сетку, только td, tr, весь table. Это либо не имеет никакого значения, или дает мне что-то, возможно, даже меньше, годную к употреблению:

скроллбара клипы сетки и теперь есть вертикальный один тоже, вместо него «опускаясь», чтобы заполнить стр.

У кого-нибудь есть мысли о том, что я могу сделать, чтобы только блок, содержащий эту таблицу, имел горизонтальную полосу прокрутки, а также не «сжимался» вертикально?

EDIT Вот скриншот другой сетки, на всплывающем окне, где только сетки свитки:

В этом случае прокручивается вертикально, а не горизонтально. Но в конечном итоге эта сетка в моем фактическом вопросе должна вести себя одинаково; только этот конкретный элемент должен прокручиваться, а не всю страницу.

Answer 1

вы действительно перепутали свой вопрос .. но я понимаю, что вы хотите, чтобы часть тела не прокручивалась, а прокручиваемый div. Если идентификатор div - это #divPageControls.

Вы можете использовать свойства CSS, как:

 #divPageControls 
     { 
     overflow-x:auto;//If you want it to scroll Horizontally 
     overflow-y:auto;//If you want it to scroll Vertically 
     } 
     body 
     { 
     overflow:hidden; 
     } //Which will make body overflow hidden both horizontal and vertical 

Надеется, что это поможет :)

Answer 2

Ok, снова редактирование:

<table style="width: 100%; table-layout: fixed;"> 
    <tr> 
    <td> 
     <div style="width: 100%; overflow: auto; background-color: #00F; height: 100px"> 
     Grid here ... 
     </div> 
    </td> 
    </tr> 
</table> 

Смотрите также здесь: How to stop table from resizing when contents grow?