Member Avatar for Martin C++

How to set seperate heights for <td> ? I have table with one rows and 2 cells. In one of them there is more data, so it drags the other cell longer than it should be and that's ugly. I need something that automatically adjusts the cell height according to how much data it consists. How can I achieve this effect ?

  • 4 Contributors
  • 6 Replies
  • 125 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Martin C++

Dani AI

Generated

Tables force cells in the same row to share the row height — the row always expands to fit the tallest cell. That is the root of the issue you saw: using height: auto on the td will not let one cell stay shorter than its neighbour. described the symptom well; ’s CSS tweak won’t change that table behavior, while and pointed in the right direction by suggesting non-table layouts.

If the two boxes are layout columns (not tabular data), use a layout method that lets each column size to its own content. Example using flexbox (works in modern browsers):

.row {
  display: flex;
  align-items: flex-start; /* prevents columns from stretching to match the tallest */
}

.col {
  width: 50%;
  box-sizing: border-box;
}

If you prefer CSS Grid, the same idea applies: set align-items: start so tracks don't stretch. Floats or inline-blocks (as mentioned) also work but need clearfix/overflow fixes and are more fragile than flex/grid.

If you must keep a table (for true tabular data or legacy email), know it cannot show different heights in the same row. Workarounds there are: split content into separate rows/containers, use nested tables, or set fixed heights with overflow to create scrollable cells — each has trade-offs and cross-client quirks.

Quick troubleshooting: remove any height:100% on table ancestors, check CSS resets, and test in the target browsers. For modern, responsive layouts, switching to flexbox/grid and using align-items:flex-start is the simplest, most robust fix.

Recommended Answers

All 6 Replies

Member Avatar for Awilson089

If you look into using CSS it may help, you can use a fairly simple code on each part of the table.
You can simply assign a class to each row / column to control what the style is a width.

The css for this is as follows, assign the class then place this in the style sheet.

.tablesize
{
width: auto;
height: auto;
}

this should solve your problem, just make sure you do the class on each part of the table, such as

<tr>
    <td class="tablesize">&nbsp;</td>
    <td class="tablesize">&nbsp;</td>
  </tr>

if you dont know how to attach a stylesheet, there are numerous tutorials on this.
Thanks,
Adam

Member Avatar for Martin C++

It did not fix my problem.

Check image in attachment, maybe it helps to understand what I need.

This is what I have. I need the second box to be with exact height of how much data it has inside.

Member Avatar for Awilson089

Please post code, including CSS, its hard to figure it out without this. Should be able to sort this quicker with the code :)

Member Avatar for wilch

You can create a parent div that contains 2 child divs. The first child div should be floated left, whilst the other floated right. But, you will have to do some fiddling with CSS to make the children divs remain in the parent.

Member Avatar for Martin C++

I had them in divs before but I decided to go with tables cause it seemed to be more cleaner, but I guess I will switch back to divs cause I cant resize cells. Thanks for help guys!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.