Solved

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

Posted on 2013-12-17
6
263 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 15

Accepted Solution

by:
Ess Kay earned 500 total points
ID: 39724892
0
 

Author Comment

by:KavyaVS
ID: 39725614
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
ID: 39727324
<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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 

Author Comment

by:KavyaVS
ID: 39727970
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
ID: 39739064
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
ID: 39739065
Thanks
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
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…
In this video, viewers will be given step by step instructions on adjusting mouse, pointer and cursor visibility in Microsoft Windows 10. The video seeks to educate those who are struggling with the new Windows 10 Graphical User Interface. Change Cu…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…
Suggested Courses

636 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