Solved

How the width split between the Table cells and spaced in the OuterTable(80% width).

Posted on 2013-12-17
6
257 Views
Last Modified: 2013-12-25
Please see the below .aspx source code. It is using the master page and skin ID's are given below.
How the width split between the Table cells and spaced in the OuterTable.
The tblUserDetails opened in the TableCell with columnspan="2"

Can you explain how the Tablecells width split in the 80% outerTable width.

%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="DisplayForm.aspx.cs" Inherits="MyApp.DisplayForm" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:Table ID="tblOuterMain" runat="server" SkinID="OuterTableSkin">
        <asp:TableRow>
            <asp:TableCell>
                <asp:Table ID="tblHeader" runat="server" Width="100%">
                    <asp:TableHeaderRow SkinID="TableHeaderRowSkin">
                        <asp:TableHeaderCell SkinID="TableHeaderCellSkin">
                                                 user Information
                        </asp:TableHeaderCell>
                    </asp:TableHeaderRow>
                    <asp:TableRow SkinID="GeneralRowSkin" Width="100%">
                        <asp:TableCell SkinID="TableCellSkin" ColumnSpan="2">
                            <asp:Table ID="tblUserDetails" runat="server" Width="100%">
                                <asp:TableRow Width="100%">
                                      <asp:TableCell SkinID="TableCellSkin">
                                        <asp:Label ID="lblUserNo" runat="server" SkinID="GeneralLabelSkin" Text="User No:"></asp:Label>
                                    </asp:TableCell>
                                    <asp:TableCell SkinID="TableCellSkin">
                                        <asp:Label ID="lblGreeting" runat="server" SkinID="GeneralLabelSkin" Text="Greeting:"></asp:Label>
                                    </asp:TableCell>
                                    <asp:TableCell SkinID="TableCellSkin">
                                        <asp:Label ID="lblFrstname" runat="server" SkinID="GeneralLabelSkin" Text="First Name:"></asp:Label>
                                    </asp:TableCell>
                                    <asp:TableCell SkinID="TableCellSkin">
                                        <asp:Label ID="lblLstName" runat="server" SkinID="GeneralLabelSkin" Text="Last Name:"></asp:Label>
                                    </asp:TableCell>
                                    <asp:TableCell SkinID="TableCellSkin">
                                        <asp:Label ID="lablSSN" runat="server" SkinID="GeneralLabelSkin" Text="SSN:"></asp:Label>
                                    </asp:TableCell>
 
                               </asp:TableRow>
                                  <asp:TableRow Width="100%">
                                      <asp:TableCell SkinID="TableCellSkin">
                                         <asp:TextBox ID="txtUserNo" SkinID="GenTextBoxBorderSkin" runat="server"></asp:TextBox>
                                       
                                    </asp:TableCell>
                                    <asp:TableCell SkinID="TableCellSkin">
                                        <asp:TextBox ID="txtGreeting" SkinID="GenTextBoxBorderSkin" runat="server"></asp:TextBox>
                                    </asp:TableCell>
                                    <asp:TableCell SkinID="TableCellSkin">
                                       <asp:TextBox ID="txtFrstname" SkinID="GenTextBoxBorderSkin" runat="server"></asp:TextBox>
                                   
                                    </asp:TableCell>
                                    <asp:TableCell SkinID="TableCellSkin">
                                        <asp:TextBox ID="txtLstName" SkinID="GenTextBoxBorderSkin" runat="server"></asp:TextBox>
                                       
                                    </asp:TableCell>
                                    <asp:TableCell SkinID="TableCellSkin">
                                           <asp:TextBox ID="txtSSN" SkinID="GenTextBoxBorderSkin" runat="server"></asp:TextBox>
                                       
                               </asp:TableRow>
                        </asp:Table>
                        </asp:TableCell>
                    </asp:TableRow>
                </asp:Table>
                        </asp:TableCell>
                    </asp:TableRow>
                </asp:Table>
 
</asp:Content>
 

Open in new window


<asp:Table SkinID="OuterTableSkin" runat="server" BorderColor="Navy" BorderStyle="Solid" BorderWidth="2px" Width="80%" />
<asp:TableHeaderRow SkinID="TableHeaderRowSkin" runat="server" Font-Names="Verdana,Courier New,Arial,Helvetica,sans-serif" Font-Bold="true" VerticalAlign="Top" Font-Size="12px" HorizontalAlign="Left" BorderColor="Navy" BorderStyle="Solid" BorderWidth="1px" />          
<asp:TableHeaderCell SkinID="TableHeaderCellSkin" runat="server" Font-Names="Verdana,Courier New,Arial,Helvetica,sans-serif" Font-Bold="true" Font-Size="12px" VerticalAlign="Top" BorderColor="Navy" BorderStyle="Solid" BorderWidth="1px" BackColor="Navy" ForeColor="White" Align="Center"/>
<asp:TableRow SkinID="GeneralRowSkin" runat="server" Font-Names="Verdana,Courier New,Arial,Helvetica,sans-serif" Font-Bold="true" VerticalAlign="Top" Font-Size="12px" HorizontalAlign="Left" ForeColor="Navy" />
<asp:TableCell SkinID="TableCellSkin" runat="server" Font-Names="Verdana,Courier New,Arial,Helvetica,sans-serif" Font-Bold="false" VerticalAlign="Top" HorizontalAlign="Left" Font-Size="12px" ForeColor="#DEE5FB"  CssClass="NoWrap"/>
.NoWrap
{
    white-space:nowrap;
}

Thanks
0
Comment
Question by:KavyaVS
  • 4
  • 2
6 Comments
 
LVL 15

Accepted Solution

by:
Ess Kay earned 500 total points
Comment Utility
0
 

Author Comment

by:KavyaVS
Comment Utility
It's  not about padding or border. Please see the source code I given.
we are putting the controls(Text Box and Labels) in  80% outer Table width. How that width
distributed for the controls.

Please see the .aspx code given and if you get any idea please let me know.

thanks
0
 
LVL 15

Expert Comment

by:Ess Kay
Comment Utility
<asp:Table SkinID="OuterTableSkin" runat="server" BorderColor="Navy" BorderStyle="Solid" BorderWidth="2px" Width="80%" />


the above  line would take the parent component, and make the table inside it 80% of that parent width.

Does that answer your question or would you like to rephrase?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:KavyaVS
Comment Utility
Did the columnspan used in the source  playing any role or not? If so how it is effecting the table cells width.

   
 <asp:TableRow SkinID="GeneralRowSkin" Width="100%">
                        <asp:TableCell SkinID="TableCellSkin" ColumnSpan="2">
                            <asp:Table ID="tblUserDetails" runat="server" Width="100%">

Open in new window


Thanks
0
 

Author Comment

by:KavyaVS
Comment Utility
I've requested that this question be closed as follows:

Accepted answer: 0 points for KavyaVS's comment #a39725614

for the following reason:

Thanks
0
 

Author Closing Comment

by:KavyaVS
Comment Utility
Thanks
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now