CSS code to aligned textboxes inside table,tr,tds...

zachvaldez
zachvaldez used Ask the Experts™
on
I have to align text boxes in 3  trs(rows)
these are phone numbers
Home phone, cell phone and work phone.
the format is..
textbox for area code,first 3 numbers and lst 4 numbers like xxx-xxx-xxxx with the "-" outside the textbox but inside the TD.
Im not good with CSS . Lt me know how to ficx it
There will be 3 rows and 3 colums(td) for each group of xxx-xxx-xxxx
thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
try this simple one first
td
{
  width:30%;
}

td input
{
  padding:5px;
}

<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .style3
        {
            width: 140px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width:auto">
            <tr style="width:auto">
                <td class="style3" style="padding:5,5,5,5">
                    <asp:TextBox ID="AreaCode" runat="server" MaxLength="3"></asp:TextBox>-
                </td>
                <td class="style3" style="padding:5,5,5,5">
                    <asp:TextBox ID="TextBox1" runat="server" MaxLength="3"></asp:TextBox>-
                </td>
                <td class="style3" style="padding:5,5,5,5">
                    <asp:TextBox ID="TextBox2" runat="server" MaxLength="4"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style3" style="padding:5,5,5,5">
                    <asp:TextBox ID="TextBox3" runat="server" MaxLength="3"></asp:TextBox>-
                </td>
                <td class="style3" style="padding:5,5,5,5">
                    <asp:TextBox ID="TextBox4" runat="server" MaxLength="3"></asp:TextBox>-
                </td>
                <td class="style3" style="padding:5,5,5,5">
                    <asp:TextBox ID="TextBox5" runat="server" MaxLength="4"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style3" style="padding:5,5,5,5">
                    <asp:TextBox ID="TextBox6" runat="server" MaxLength="3"></asp:TextBox>-
                </td>
                <td class="style3" style="padding:5,5,5,5">
                    <asp:TextBox ID="TextBox7" runat="server" MaxLength="3"></asp:TextBox>-
                </td>
                <td class="style3" style="padding:5,5,5,5">
                    <asp:TextBox ID="TextBox8" runat="server" MaxLength="4"></asp:TextBox>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Hi zachvaldez,

Hope this helps...
<table>
	<tr>
		<td>Home Phone</td>
		<td>
			<table>
				<tr>
					<td><input type="text" size="3" /></td>
					<td>-</td>
					<td><input type="text" size="3" /></td>
					<td>-</td>
					<td><input type="text" size="4" /></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>Cell Phone</td>
		<td>
			<table>
				<tr>
					<td><input type="text" size="3" /></td>
					<td>-</td>
					<td><input type="text" size="3" /></td>
					<td>-</td>
					<td><input type="text" size="4" /></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>Work Phone</td>
		<td>
			<table>
				<tr>
					<td><input type="text" size="3" /></td>
					<td>-</td>
					<td><input type="text" size="3" /></td>
					<td>-</td>
					<td><input type="text" size="4" /></td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Open in new window

Author

Commented:
while IM working on your suggestions, originally I was inserting tables inside TDs for the 3 itmes
Home phone,Cell,Work. I was having trouble alingning the new table in the left corner of the TD and Im making to make it look tight and nice but could'nt do it.. Is ther any suggestion/tip to fix that alignment so no extra space between teh table and teh TD. thanks

Author

Commented:
BTW Im using asp.net server controls for the textboxes..

Author

Commented:
here's the source...  Id like to perfctly aligned this.....

<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td align="right" valign="top" style="height: 12px; width: 256px;">
                    <asp:Label ID="Label9" runat="server" Text="Home Phone:" Width="205px"></asp:Label>
                </td>
                <td align="left" style="width: 182px; height: 12px;" valign="top" rowspan="1">
                    <asp:TextBox ID="TextBox6" runat="server" Width="16px" Font-Names="Times New Roman"
                        TabIndex="8" MaxLength="3"></asp:TextBox>-<asp:TextBox ID="TextBox7" runat="server"
                            MaxLength="3" Width="28px" Font-Names="Times New Roman" TabIndex="9" Height="14px"></asp:TextBox>-<asp:TextBox
                                ID="TextBox8" runat="server" MaxLength="4" Width="31px" Font-Names="Times New Roman"
                                TabIndex="10"></asp:TextBox></td>
                <td align="left" nowrap="nowrap" style="width: 105px; height: 12px;">
                </td>
                <td align="left" nowrap="nowrap" style="width: 64px; height: 12px;">
                </td>
            </tr>
            <tr>
                <td align="right" style="width: 256px; text-align: right; height: 16px;" valign="top">
                    <asp:Label ID="Label10" runat="server" Text="Work Phone:" Width="202px"></asp:Label>&nbsp;
                </td>
                <td align="left" style="width: 182px; height: 16px;" valign="top">
                    <asp:TextBox Font-Names="Times New Roman" ID="TextBox10" MaxLength="3" runat="server"
                        TabIndex="11" Width="16px"></asp:TextBox>-<asp:TextBox Font-Names="Times New Roman"
                            Height="15px" ID="TextBox11" MaxLength="3" runat="server" TabIndex="12" Width="28px"></asp:TextBox>-<asp:TextBox
                                ID="TextBox12" runat="server" Width="36px" />
                    Ext<asp:TextBox Font-Names="Times New Roman" ID="TextBox13" MaxLength="3" runat="server"
                        TabIndex="14" Width="23px"></asp:TextBox></td>
                <td align="left" nowrap="nowrap" style="width: 105px; height: 16px;">
                </td>
                <td align="left" nowrap="nowrap" style="width: 64px; height: 16px;">
                </td>
            </tr>
            <tr>
                <td align="right" style="width: 256px; height: 6px; text-align: right" valign="top">
                    <asp:Label ID="Label6" runat="server" Text="Cell Phone:" Width="203px"></asp:Label></td>
                <td align="left" nowrap="nowrap" style="width: 182px; height: 6px">
                    <asp:TextBox ID="TextBox1" runat="server" Width="16px" Font-Names="Times New Roman"
                        TabIndex="16" MaxLength="3"></asp:TextBox>-<asp:TextBox ID="TextBox18" runat="server"
                            Width="25px" Font-Names="Times New Roman" TabIndex="17" Height="15px" MaxLength="3"></asp:TextBox>-<asp:TextBox
                                ID="TextBox19" runat="server" Width="35px" Font-Names="Times New Roman" TabIndex="18"
                                MaxLength="4"></asp:TextBox></td>
                <td align="left" nowrap="nowrap" style="width: 105px; height: 6px">
                </td>
                <td align="left" nowrap="nowrap" style="width: 64px; height: 6px">
                </td>
            </tr>
            <tr>
                <td align="right" style="width: 256px; text-align: right; height: 10px;" valign="top">
                    <asp:Label ID="Label19" runat="server" Text="Fax:" Width="203px"></asp:Label></td>
                <td align="left" nowrap="nowrap" style="width: 182px; height: 10px;">
                    <asp:TextBox ID="TextBox20" runat="server" Width="16px" Font-Names="Times New Roman"
                        TabIndex="19" MaxLength="3"></asp:TextBox>-<asp:TextBox ID="TextBox21" runat="server"
                            Width="24px" Font-Names="Times New Roman" TabIndex="20" MaxLength="3"></asp:TextBox>-<asp:TextBox
                                ID="TextBox22" runat="server" Width="35px" Font-Names="Times New Roman" TabIndex="21"
                                MaxLength="4"></asp:TextBox>
                    &nbsp; Ext.<asp:TextBox ID="TextBox23" runat="server" Width="23px" Font-Names="Times New Roman"
                        TabIndex="22"></asp:TextBox></td>
                <td align="left" nowrap="nowrap" style="width: 105px; height: 10px;">
                </td>
                <td align="left" nowrap="nowrap" style="width: 64px; height: 10px;">
                </td>
            </tr>
            <tr>
        </table>
    </form>
</body>
You must be able to just copy and paste the code i posted and then add this label to that. Let me do it again here.  Just copy this on aspx page and you should be able to get what you want.

<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .style3
        {
            width: 61px;
        }
        .style4
        {
            width: 52px;
        }
        .style5
        {
            width: 55px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: auto">
            <tr style="width: auto">
                <td>
                    <asp:Label ID="Home" Text="Home" runat="server" />
                </td>
                <td class="style4">
                    <asp:TextBox ID="AreaCode" runat="server" MaxLength="3" Width="42px"></asp:TextBox>-
                </td>
                <td class="style5">
                    <asp:TextBox ID="TextBox1" runat="server" MaxLength="3" Width="46px"></asp:TextBox>-
                </td>
                <td class="style3">
                    <asp:TextBox ID="TextBox2" runat="server" MaxLength="4" Width="58px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label1" Text="Cell" runat="server"/>
                </td>
                <td class="style4">
                    <asp:TextBox ID="TextBox3" runat="server" MaxLength="3" Width="45px"></asp:TextBox>-
                </td>
                <td class="style5">
                    <asp:TextBox ID="TextBox4" runat="server" MaxLength="3" Width="45px"></asp:TextBox>-
                </td>
                <td class="style3">
                    <asp:TextBox ID="TextBox5" runat="server" MaxLength="4" Width="55px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label2" Text="Work" runat="server"/>
                </td>
                <td class="style4">
                    <asp:TextBox ID="TextBox6" runat="server" MaxLength="3" Width="41px"></asp:TextBox>-
                </td>
                <td class="style5">
                    <asp:TextBox ID="TextBox7" runat="server" MaxLength="3" Width="45px"></asp:TextBox>-
                </td>
                <td class="style3">
                    <asp:TextBox ID="TextBox8" runat="server" MaxLength="4" Width="51px"></asp:TextBox>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Author

Commented:
the 3rd column textboxes in tr/td are not lined up with cols 1 and col 2
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .style3
        {
            width: 55px;
            padding: 5,5,5,5;
        }
        .style4
        {
            width: 45px;
            padding: 5,5,5,5;
        }
        .style5
        {
            width: 45px;
            padding: 5,5,5,5;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: auto">
            <tr style="width: auto">
                <td>
                    <asp:Label ID="Home" Text="Home" runat="server" />
                </td>
                <td class="style4">
                    <asp:TextBox ID="AreaCode" runat="server" MaxLength="3" Width="45px"></asp:TextBox>-
                </td>
                <td class="style5">
                    <asp:TextBox ID="TextBox1" runat="server" MaxLength="3" Width="45px"></asp:TextBox>-
                </td>
                <td class="style3">
                    <asp:TextBox ID="TextBox2" runat="server" MaxLength="4" Width="55px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label1" Text="Cell" runat="server"/>
                </td>
                <td class="style4">
                    <asp:TextBox ID="TextBox3" runat="server" MaxLength="3" Width="45px"></asp:TextBox>-
                </td>
                <td class="style5">
                    <asp:TextBox ID="TextBox4" runat="server" MaxLength="3" Width="45px"></asp:TextBox>-
                </td>
                <td class="style3">
                    <asp:TextBox ID="TextBox5" runat="server" MaxLength="4" Width="55px"></asp:TextBox>
                </td>
            </tr>
            <tr style="width:auto">
                <td>
                    <asp:Label ID="Label2" Text="Work" runat="server"/>
                </td>
                <td class="style4">
                    <asp:TextBox ID="TextBox6" runat="server" MaxLength="3" Width="45px"></asp:TextBox>-
                </td>
                <td class="style5">
                    <asp:TextBox ID="TextBox7" runat="server" MaxLength="3" Width="45px"></asp:TextBox>-
                </td>
                <td class="style3">
                    <asp:TextBox ID="TextBox8" runat="server" MaxLength="4" Width="55px"></asp:TextBox>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial