CODEWITHSUNDEEP
htmlcssalignment
amagumori
amagumori

Reputation: 697

html table elements not aligning with the row above

I'm having trouble with styling a table.

http://jsfiddle.net/Gs7Vx/5/

<tr>
    <td class="label">HRS</td>
    <td class="label">INSP</td>
</tr>

I want the "HRS" and "INSP" fields in this row to line up with the input fields above them. I've tried a lot of things, none of them have worked. I'm sure there's a simple solution and I'm just missing it.

Upvotes: 0

Views: 218

Answers (6)

Rajesh Paul
Rajesh Paul

Reputation: 7019

Check this fiddle.

the row above that row containing only two <td>s with content 'hrs' and 'insp', contains 3 <td>s. Hence you need to put a blank td in that row(i.e. with 'hrs' and 'insp') too.

Besides you need to remove the style float:right and add the style position:relative in the style definition of the .smallinput-class.

  • O/P

enter image description here

This solves your problem..

Upvotes: 1

Eric Bishard
Eric Bishard

Reputation: 5341

You would want to setup your table like this:

            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>HRS</td>
                <td>
                  <input type="text" class="smallinput">
                </td>
              </tr>
              <tr>
                <td>INSP</td>
                <td>
                  <input type="text" class="smallinput">
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <textarea name="textarea" rows="12" class="txt"></textarea>
                </td>
              </tr>
            </table>

Next time format your code before posting. You did not make your intent clear. SO we have multiple people giving you different answers because we are formatting your code and trying to figure out what you really want to do. Make sure you have the same number of <td>s in each row as well or use colspan to make up for the missing ones.

Upvotes: 1

th1rdey3
th1rdey3

Reputation: 4358

this worked for me

<tr>
    <td class="fieldtitle"><i style="color:#fff;" class="icon"></i>
    </td>
    <td width="40px" style="font-size:12px">
        <input type="text" class="smallinput"><span style="font-size:10px">HRS</span>
    </td>
    <td width="40px" style="font-size:12px">
        <input type="text" class="smallinput"><span style="font-size:10px">INSP</span>
    </td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>

Upvotes: 0

Devin
Devin

Reputation: 7720

your code is all wrong. First of all, you have unclosed elements, all input elements should end with />

Then, to have everything in a line, do it like this: 

<tr>
<td>label</td>
<td>input</td>
<td>label</td>
<td>input</td>
</tr>

an then style as needed

Upvotes: 0

levininja
levininja

Reputation: 3248

To get the inputs to line up with the labels, you need to

A) add a blank <td></td> to the second row (because the row above it has 3 cells and it only has 2), and

B) remove float:right; from the .label class.

See this as the example. I only added the <td></td> to the row on the first out of your four sections, but they are all identical, so you get the point.

Upvotes: 1

Back2Basics
Back2Basics

Reputation: 7806

I took it out of these <td class="label"></td> and put it right in front and it worked fine.

INSP<input type="text" class="smallinput"></td><td width="40px" style="font-size:12px">HRS<input type="text" class="smallinput">

(using chrome.)

Upvotes: 0

Related Questions