CODEWITHSUNDEEP
htmlformat
MJH
MJH

Reputation: 366

Simple HTML formatting issue

I have a pretty simple formatting issue. My question is, from the screenshot image below, how can I eliminate the space above "Recruiter" and below "First Name" highlighted in yellow ?

My HTML code is: 

<table border="1" width="100%">
    <tr>
        <td width="15%">    <%--Labels--%>
            <table>
                <tr><td><asp:Label runat="server" ID="lblRecruiter" Text="Recruiter"></asp:Label></td></tr>
                <tr><td><asp:Label runat="server" ID="lblRecruiterFirstName" Text="First Name"></asp:Label></td></tr>
                <tr><td><asp:Label runat="server" ID="lblAccountManager" Text="Account Mangaer"></asp:Label></td></tr>
                <tr><td><asp:Label runat="server" ID="lblAccountManagerFirstName" Text="First Name"></asp:Label></td></tr>
                <tr><td><asp:Label runat="server" ID="lblClientCompany" Text="Client"></asp:Label></td></tr>
                <tr><td><asp:Label runat="server" ID="lblHiringManagerFirstName" Text="First Name"></asp:Label></td></tr>
            </table>
        </td>
        <td width="85%">    <%--Text Fields--%>
            <table>
                <tr><td><asp:DropDownList runat="server" ID="ddlRecruiter"></asp:DropDownList></td></tr>
                <tr><td><asp:TextBox runat="server" ID="txtRecruiterFirstName"></asp:TextBox></td></tr>
                <tr><td><asp:DropDownList runat="server" ID="ddlAccountManager"></asp:DropDownList></td></tr>
                <tr><td><asp:TextBox runat="server" ID="txtAccountManagerFirstName"></asp:TextBox></td></tr>
                <tr><td><asp:TextBox runat="server" ID="txtClientCompany"></asp:TextBox></td></tr>
                <tr><td><asp:TextBox runat="server" ID="txtHiringMangaerFirstName"></asp:TextBox></td></tr>
            </table>
        </td>
    </tr>
</table>

enter image description here

Upvotes: 2

Views: 43

Answers (2)

Always Learning
Always Learning

Reputation: 5601

I assume you would like the text on the left to align with the fields on the right. Instead of making them two separate tables, you should make one table with 2 columns. This is how the first row might look:

<table>
    <tr>
    <td width="15%"><asp:Label runat="server" ID="lblRecruiter" Text="Recruiter"></asp:Label></td>
    <td width="85%"><asp:DropDownList runat="server" ID="ddlRecruiter"></asp:DropDownList></td>
    </tr>

The problem with what you have is that each table (left and right) gets laid out based on its contents and the items on the right are taller than the text lines. The left table's result is aligned centered by default so you get that gap above and below.

Upvotes: 1

AETech
AETech

Reputation: 65

Use inspect element to see if anything is extending its height, otherwise, just set the margins and padding to 0, or set a height if possible.

Upvotes: 1

Related Questions