Quick CSS question...

waterjug · Sep 24, 2012

If I had a webpage with several tables, and I wanted anything with a <td> tag to be 100 pixels in height, what would I put in the css in the pages header? I tried this and it didn't work:

<head>
<style type="text/css">
td{height:100px;}
</style>
</head>

clamum · Sep 24, 2012

Try the Software forum? ;-)

As for your question, maybe try "table td { width: 100px }"? If that don't work try a "tr" between the "table" and "td" (tables can be kinda weird in CSS sometimes).

Fritzo · Sep 24, 2012

Yeah, you have to specify the cell dimensions with a table.

clamum · Sep 24, 2012

clamum said:
Try the Software forum? ;-)

As for your question, maybe try "table td { width: 100px }"? If that don't work try a "tr" between the "table" and "td" (tables can be kinda weird in CSS sometimes).

Oops, I meant height, not width haha.

CurseTheSky · Sep 24, 2012

Do you want the TD cell itself to be 100px high, or anything within it (like an image) to be 100px high?

If you want the cell itself to be 100px in height, you would do this:

td {
height: 100px !important;
}

I included the important tag to override other styles that have heights that could affect the TD.

PhatoseAlpha · Sep 24, 2012

Unfortunately, the td element doesn't play nice with css. Tables are designed so that rows will expand as needed, and elements will expand to the height of the row.

If it must be 100 pixels high, wrap all your content in the cell inside a div, and fix the height on that, ala

Code:

<table><tbody>
<tr><td><div class='body'>Here</div></td></tr>
</tbody></table>

<style type='text/css'>
td div {height: 100px;}
</style>

Why does it need to be exactly 100 pixels high, anyway? You aren't using tables for layout....right?

Leros · Sep 30, 2012

PhatoseAlpha said:
Unfortunately, the td element doesn't play nice with css. Tables are designed so that rows will expand as needed, and elements will expand to the height of the row.

If it must be 100 pixels high, wrap all your content in the cell inside a div, and fix the height on that, ala

Code:

<table><tbody> <tr><td><div class='body'>Here</div></td></tr> </tbody></table> <style type='text/css'> td div {height: 100px;} </style>

Why does it need to be exactly 100 pixels high, anyway? You aren't using tables for layout....right?

Sometimes a table is the right element to use for layout. For example, Gmail uses a table to list all of the emails in the inbox and they specify a height on each td.

beginner99 · Oct 1, 2012

Leros said:
Sometimes a table is the right element to use for layout. For example, Gmail uses a table to list all of the emails in the inbox and they specify a height on each td.

But that list is tabular data (sender, subject, date,...) hence using a table is correct.

GSquadron · Oct 1, 2012

One of these should work:

.cell
{
padding: 50px 0px;
}

or

.cell
{
line-height: 100px;
}

or

.cell
{
height: 100px;
}

DannyBoy · Nov 5, 2012

CurseTheSky said:
Do you want the TD cell itself to be 100px high, or anything within it (like an image) to be 100px high?

If you want the cell itself to be 100px in height, you would do this:

td {
height: 100px !important;
}

I included the important tag to override other styles that have heights that could affect the TD.

No, never use !important :thumbsdown:

If you're using !important overrides you're doing something wrong.

Use proper specificity:

Code:

table td {
    height: 100px;
}

Or give your cell a class name and specify the rules for that class:

Code:

table td.myClass {
    height: 100px;
}

etc.

Search

Quick CSS question...

waterjug

Senior member

clamum

Lifer

Fritzo

Lifer

clamum

Lifer

CurseTheSky

Diamond Member

PhatoseAlpha

Platinum Member

Leros

Lifer

beginner99

Diamond Member

GSquadron

Member

DannyBoy

Diamond Member

TRENDING THREADS