Member Avatar for reen.blom

I am stuck. I have a layout witha table 3 columns. Each column has a table inside of it, with different colour background. I do not seem to be able to make my inlaid tables stretch to the very bottom of the main table. They are formatted according to their content and that makes them all different length.

I have read that it is not appropriate to use "height" tags to put in a fixed number, and 100% does not work. Is there a way for me to align the height?

Hope it is not too confusing.

Thank you

  • 2 Contributors
  • 2 Replies
  • 107 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by reen.blom

Dani AI

Generated

This thread is from 2007, so the table-era fixes discussed by and the background-image trick found by are understandable for that time. Modern CSS makes the visual goal — three side-by-side columns that share the same height — much easier and more robust than nesting tables or using image-based "faux columns."

A simple, reliable approach is CSS Flexbox. Make the outer wrapper a flex container and let the column elements stretch to the same height automatically:

.container {
  display: flex;
  gap: 16px;
}

.column {
  flex: 1;
  padding: 16px;
  background: /* set different colors per column */;
}

CSS Grid is another clean option when layout needs more control (rows, explicit placement, responsive reflow):

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.grid > * { padding: 16px; }

If older-browser support is required, a small JavaScript fallback can equalize heights: measure the tallest column and set that height on the others. For very tall or unpredictable content, prefer letting a single column scroll (use max-height plus overflow:auto) rather than forcing fixed heights. The background-image/faux-column technique that used is still a valid visual shortcut when the background is decorative and not dependent on element height.

For implementation details and browser guidance, see the Flexbox and Grid overviews on MDN: Flexbox guide and CSS Grid Layout.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

Use CSS.

The height tag is deprecated (due to be discontinued), but the CSS height attribute is not. height: 100%; works in most cases. It does not work in two cases:

- Where you are trying to make the item expand to just fill the browser window (which is always impossible if the page is to work on all computers).

- Where there is no box object to take a height attribute.

In your case, there IS a containing box object (the td tag of the outer table), so a 100% height attribute in a CSS class used in the table tag should work. Unfortunately, not only does it not work, but IE and FF do it different ways.

I have another suggestion: Use a single table.

You can use the colspan and rowspan attributes of the td tag to make stuff line up, like this:

<style type="text/css">
.wfl {width: 100%;}
.pink {background-color: #ffaaaa;}
.blue {background-color: #aaccff;}
.puce {background-color: #eeaaf8;}
.gray {background-color: #cccccc;}
</style>

....

<table class="wfl gray">
  <tr>
    <td colspan="3">Bigtitle 1</td>
    <td colspan="3">Bigtitle 2</td>
    <td colspan="3">Bigtitle 3</td>
  </tr>
  <tr>
    <td class="blue">Big 1 little A</td>
    <td class="blue">Big 1 little B</td>
    <td class="blue">Big 1 little C</td>
    <td class="puce">Big 2 little A</td>
    <td class="puce">Big 2 little B</td>
    <td class="puce">Big 2 little C</td>
    <td rowspan="3" class="pink">Big 3 little A</td>
    <td rowspan="3" class="pink">Big 3 little B</td>
    <td rowspan="3" class="pink">Big 3 little C</td>
  </tr>
  <tr>
    <td rowspan="2" class="blue">Big 1 little D</td>
    <td rowspan="2" class="blue">Big 1 little E</td>
    <td rowspan="2" class="blue">Big 1 little F</td>
    <td class="puce">Big 2 little A</td>
    <td class="puce">Big 2 little B</td>
    <td class="puce">Big 2 little C</td>
  </tr>
  <tr>
    <td class="puce">Big 2 little G</td>
    <td class="puce">Big 2 little H</td>
    <td class="puce">Big 2 little I</td>
  </tr>
</table>

If you really want to get fancy, you can use different border styles to control the outlines of parts of the tables. The table on this page is made using rowspan.

http://geocities.com/midimagic@sbcglobal.net/leadlag.htm

Member Avatar for reen.blom

Thank you midimagic!

I will remember not to mess with the height ever again! Next time I will not to to tie my alignment to the table height!

I have solved the problem by setting a background image to a <td> column containing my table! Took me week to figure that out!!!

I think I should learn how to do without tables!

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.