• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Quick CSS question...

W

waterjug

Senior member
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>
 
Last edited by a moderator:
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).
 
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).
Click to expand...
Oops, I meant height, not width haha.
 
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.
 
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?
 
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?
Click to expand...

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.
 
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.
Click to expand...

But that list is tabular data (sender, subject, date,...) hence using a table is correct.
 
One of these should work:

.cell
{
padding: 50px 0px;
}

or

.cell
{
line-height: 100px;
}

or

.cell
{
height: 100px;
}
 
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.
Click to expand...

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.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top