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

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
KavyaVSAsked:
Who is Participating?
 
Ess KayConnect With a Mentor EntrapenuerCommented:
0
 
KavyaVSAuthor Commented:
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
 
Ess KayEntrapenuerCommented:
<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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
KavyaVSAuthor Commented:
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
 
KavyaVSAuthor Commented:
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
 
KavyaVSAuthor Commented:
Thanks
0
All Courses

From novice to tech pro — start learning today.