Gridview 디자인 : Gridview를 분할하여 전체 페이지 폭을 사용하지 않으려면 어떻게해야합니까?

Question

현재 12 열 및 2 행 (1 행이 헤더) 인 C# 프로그램에서 gridview 컨트롤이 있습니다. 6 열과 2 행이 있고 나머지 6 열과 행이 아래에 있으므로 페이지의 전체 너비를 차지하지 않으므로 12 열을 분할 할 수 있습니까? 고맙습니다.

내있는 gridview :

<asp:GridView ID="GridView1" HorizontalAlign="center" Visible="false" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" 
       DataSourceID="SqlDataSource" EmptyDataText="No data could be found for the email address" CellSpacing="3" CellPadding="4" 
       GridLines="None" ForeColor="#333333"> 
       <Columns> 
        <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" 
         SortExpression="ID"> 
         <ItemStyle Font-Names="Verdana" Font-Size="9pt" Width="50px" /> 
         <HeaderStyle Font-Names="Verdana" Font-Size="10pt" Width="50px" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="name" HeaderText="Name" SortExpression="name"> 
         <ItemStyle Font-Names="Verdana" Font-Size="9pt" /> 
         <HeaderStyle Font-Names="Verdana" Font-Size="10pt" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="EmailAddress" HeaderText="Email Address" SortExpression="EmailAddress"> 
         <ItemStyle Font-Names="Verdana" Font-Size="9pt" /> 
         <HeaderStyle Font-Names="Verdana" Font-Size="10pt" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="Address1" HeaderText="Address1" SortExpression="Address1"> 
         <ItemStyle Font-Names="Verdana" Font-Size="9pt" /> 
         <HeaderStyle Font-Names="Verdana" Font-Size="10pt" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="Address2" HeaderText="Address2" SortExpression="Address2"> 
         <ItemStyle Font-Names="Verdana" Font-Size="9pt" /> 
         <HeaderStyle Font-Names="Verdana" Font-Size="10pt" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="city" HeaderText="City" SortExpression="city"> 
         <ItemStyle Font-Names="Verdana" Font-Size="9pt" /> 
         <HeaderStyle Font-Names="Verdana" Font-Size="10pt" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="PostCode" HeaderText="Post Code" SortExpression="PostCode"> 
         <ItemStyle Font-Names="Verdana" Font-Size="9pt" /> 
         <HeaderStyle Font-Names="Verdana" Font-Size="10pt" /> 
        </asp:BoundField> 
       </Columns> 

       <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> 
       <FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" /> 
       <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> 
       <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> 
       <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 
       <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> 
       <EditRowStyle BackColor="#999999" /> 
       <EmptyDataRowStyle cssclass="mycentertext" /> 
      </asp:GridView> 

Answer 1

마이크, 당신은 내가 당신을 혼란 UI, 이럴으로 끝날 것 같아요 원하는 것을 구현하는 경우.

많은 열이있는 표보기가 나타날 때마다 표가 더 적거나 중요하거나 식별되는 열을 표시하도록 UI를 리팩터링 한 다음 사용자가 행을 클릭하면 나머지 행 데이터를 표시하는 것이 그리드 아래에 별도의 "세부 사항"표시.

귀하의 경우에는 ID, 이름 및 이메일 열을 남기고 나머지는 세부 정보 섹션으로 옮깁니다.

자바 스크립트가 충분한 경우 클라이언트 측에서도 가능해야합니다.