How do you size controls so they align evenly in an asp:Table?

Question

I'm developing a website and am attempting to create a properly aligned data entry form. Using a table structure I was expecting the controls to align properly, but to no avail. I've been using the ColumnSpan attribute of the <asp:TableCell> control to make the Title field span across the width of the entire form.

The Title <asp:TextBox> has a width property set to "100%", but the First and Last Name boxes have specificly sized pixel widths.

This is the result of my current code:

Screenshot of Layout

And the code itself:

<asp:Table runat="server">
    <asp:TableRow>
        <asp:TableCell>
            First Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="FirstNameTextBox" runat="server" Width="150px" />
        </asp:TableCell>
        <asp:TableCell>
            &nbsp;&nbsp;Last Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="LastNameTextBox" runat="server" Width="150px" />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            Title:
        </asp:TableCell>
        <asp:TableCell ColumnSpan="3">
            <asp:TextBox ID="TitleTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

As you can see the layout is simple enough. Unfortunately it just seems to take up a hair too much space. Any advice into removing the additional space on the Title <asp:TextBox> so that they align perfectly would be greatly appreciated.

@Aristos Unfortunately, that does not appear to move anything. Plus, the use of actual asp labels shifts the formatting, albeit almost to the point of being undetectable. — Duncan Hill, May 23 '12 at 19:18

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

Right align your last name textbox. That way, your title textbox will be flush with the left of the first name textbox, and the right of the last name textbox.

Edit

I'm convinced it has something to do with padding. I did a quick search and did find a possible solution for you here: HTML input textbox with a width of 100% overflows table cells.

I'd be interested to know if that fixes it.

edited May 23 '17 at 12:01

Community

1
1

answered May 23 '12 at 19:58

Jeremy

8,902
2
36
44

Unfortunately that doesn't appear to change anything. Using Google Chrome's 'Inspect Element' feature I can see the sizing of the container and the textbox. The container (td) is 391 pixels wide, the textbox is 394 pixels. I can't account for this extra three pixels and why its container is **smaller** than the control itself. My apologies, but this is gonna drive me crazy. Ha! – Duncan Hill May 23 '12 at 20:08
Interesting, it sounds like there is some padding or spacing. Set the `CellPadding` and `CellSpacing` properties of your table to 0 and see if the td becomes 394px. – Jeremy May 23 '12 at 20:13
Unfortunately it didn't do anything other than squish them together, I've updated the images in the main question for reference. – Duncan Hill May 23 '12 at 20:17

score 0 · Accepted Answer · answered May 24 '12 at 16:58

SOLUTION:

<asp:Table runat="server">
    <asp:TableRow>
        <asp:TableCell>
            First Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell Width="150px">
            <asp:TextBox ID="FirstNameTextBox" runat="server" Width="100%" />
        </asp:TableCell>
        <asp:TableCell Width="10px" />
        <asp:TableCell>
            Last Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell Width="150px">
            <asp:TextBox ID="LastNameTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            Title:
        </asp:TableCell>
        <asp:TableCell ColumnSpan="4">
            <asp:TextBox ID="TitleTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

I changed the Width definitions to be on the <asp:TableCell> and added a 10px column for blank space. Then, by setting the Width of the TextBoxes to be 100% it eliminated the space; odd, but simple solution.

Screenshot of Solution

score 0 · Answer 3 · answered Sep 06 '13 at 04:49

0

Use this css with 100% width text inputs

box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;

answered Sep 06 '13 at 04:49

Top Systems

951
12
24

How do you size controls so they align evenly in an asp:Table?

3 Answers3