CODEWITHSUNDEEP
htmlcss
LuxuryWaffles
LuxuryWaffles

Reputation: 1708

HTML Table's TD not aligning top

I am just trying out a simple table format but it's been giving me headache

enter image description here

The table has a fixed height, and the items is supposed to be aligned to the top. With empty spaces below if there is excess space.

Current Code

<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
    <td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
    <td><b>Phone Number</b></td>
    <td><b>4G</b></td>
</tr>
<tr>
    <td>55555555</td>
    <td>YES</td>
</tr>
<tr>
    <td>66666666</td>
    <td>YES</td>
</tr>
<tr>
    <td>77777777</td>
    <td>NO</td>
</tr>
</table>

EDIT:

I think i wasn't clear with what I want earlier, what I want is not just for the TD to valign top, its for the whole cell to be valigned to the top of the table without each of them having the average height of the table.

enter image description here

Upvotes: 2

Views: 4225

Answers (7)

Travis Clarke
Travis Clarke

Reputation: 6671

The vertical-align CSS property in not inherited by default. Apply the vertical-align: top property to the td elements directly.

Upvotes: 2

Willie Mwewa
Willie Mwewa

Reputation: 361

td {
    vertical-align: top;
    line-height: 2.0 !important
    }

Upvotes: 1

Stickers
Stickers

Reputation: 78696

You need to apply vertical align value to the <td> element

td {
    vertical-align: top;
}

Also noticed you should add colspan on the only <td>, in first <tr>

<td colspan="2" style='vertical-align: top;'>
    <b><u>Sim Card :</u></b>
</td>

Edit:

Just saw you updated question. You can just create some empty cell and add them before the end of the table. Also remove the height value on the table.

<tr>
    <td colspan="2">
        &nbsp;
    </td>
</tr>

Updated demo http://jsfiddle.net/q8e78cL0/

Edit 2:

@GCyrillus also pointed out a better way by using pseudo element to create the blank space, so no need to touch the markup.

table:after {
    content: '';
    display: table-row;
    height: 100px;
}

Demo here http://jsfiddle.net/q8e78cL0/2/

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105933

You may as well reset tr display unless you have some colspan involved wich might need tuning to be done.

tr{
  display:table;
  width:100%;
  table-layout:fixed;
}
<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
    <td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
    <td><b>Phone Number</b></td>
    <td><b>4G</b></td>
</tr>
<tr>
    <td>55555555</td>
    <td>YES</td>
</tr>
<tr>
    <td>66666666</td>
    <td>YES</td>
</tr>
<tr>
    <td>77777777</td>
    <td>NO</td>
</tr>
  <tr><td style="text-align:center; background:#eee">add more content and rows to let that table grow itself once bottom reached</td></tr>
</table>

Since answer is already given, mind it as an alternative

another answers says: add empty elements, wich actually is a good tip too, but via :after it wouldn't bother the markup.

tr {
  height:1%;
  }
table:after {
  content:'';
  display:table-row;
  }
<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
    <td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
    <td><b>Phone Number</b></td>
    <td><b>4G</b></td>
</tr>
<tr>
    <td>55555555</td>
    <td>YES</td>
</tr>
<tr>
    <td>66666666</td>
    <td>YES</td>
</tr>
<tr>
    <td>77777777</td>
    <td>NO</td>
</tr>
</table>

Upvotes: 3

Nikola Bogdanović
Nikola Bogdanović

Reputation: 3213

This looks exactly like you want in your second picture:

<div style='width: 100%; height: 250px; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext;'>
    <table width='100%'>
        <tr style='border-bottom: 1.0pt solid windowtext;'>
            <td><b><u>Sim Card:</u></b></td>
        </tr>
        <tr>
            <td><b>Phone Number</b></td>
            <td><b>4G</b></td>
        </tr>
        <tr>
            <td>55555555</td>
            <td>YES</td>
        </tr>
        <tr>
            <td>66666666</td>
            <td>YES</td>
        </tr>
        <tr>
            <td>77777777</td>
            <td>NO</td>
        </tr>
    </table>
</div>

https://jsfiddle.net/83drLumk/2/

Upvotes: 3

Jebble
Jebble

Reputation: 266

I can't comment yet so I'll have to do it this way.

You're giving your table a fixed height, which is exactly what causes the thing you want to remove. The auto calculated height of your rows. If I were you I would remove that table height and put a div around the table with a fixed height to give you the border you want.

Upvotes: 1

Kamikaza
Kamikaza

Reputation: 635

Here is the correct way

<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
    <td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
    <td><b>Phone Number</b></td>
    <td><b>4G</b></td>
</tr>
<tr>
    <td>55555555</td>
    <td>YES</td>
</tr>
<tr>
    <td>66666666</td>
    <td>YES</td>
</tr>
<tr>
    <td>77777777</td>
    <td>NO</td>
</tr>
</table>

And here is a working demo fiddle for you. Just copy and paste the demo css and html

https://jsfiddle.net/wgrLfxg3/13/

Upvotes: 1

Related Questions