Member Avatar for HLA91

Hi everyone
I have only used tables once before and I am making a web page with a table that fits flush against the sides and top. I have set my nav bar at about 18%, I remember some code you could place in a cell that would make it take up the remaining room does anyone know that code please?

Many thanks
HLA91

  • 5 Contributors
  • 4 Replies
  • 129 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by MattEvans

Dani AI

Generated

Brief recap and context: wanted a table that sits flush to the page edges with a left navigation column around 18% and a second cell that automatically takes the remaining space. rightly pointed out that the sizing belongs on the table element rather than individual cells, and correctly noted that vertical filling only works when the table has a defined containing height.

Practical table-based approach (predictable behavior)
Use a column definition for the nav column and leave the main column without an explicit width so the browser allocates the remainder. For predictable layouts and to avoid content-driven reflow, use a fixed table algorithm and give the flexible cell an overflow rule so large content scrolls instead of widening the layout.

<table style="table-layout:fixed; width:100%;">
  <colgroup>
    <col style="width:18%;">
    <col>
  </colgroup>
  <tr>
    <td>nav</td>
    <td style="overflow:auto; box-sizing:border-box;">main content</td>
  </tr>
</table>

Modern alternative (recommended for new projects)
A CSS flexbox layout is simpler and more reliable for “left column fixed / right column fluid” patterns, and it handles vertical stretching without touching html/body heights.

<div style="display:flex; height:100vh; margin:0;">
  <nav style="flex:0 0 18%;">nav</nav>
  <main style="flex:1; overflow:auto; padding:1rem;">content</main>
</div>

Troubleshooting checklist
Ensure a standards DOCTYPE so percentages behave correctly, reset the body margin (browsers add default margin), use box-sizing:border-box to make padding predictable, and watch for long unbroken strings or images that force expansion. For full-page height in legacy contexts, a parent with a fixed height is required; otherwise prefer viewport units (vh) or flexbox for simpler results.

Recommended Answers

All 4 Replies

Member Avatar for GiorgosK

I am not sure if its against the ToS to post the website to see what you are talking about,

because by your description I am not sure exactly what you are asking.

Member Avatar for MidiMagic

You set up a class with the width of the entire table. Put the class attribute in the table tag, not the td tag.

.width100 {width: 100%;}

....

<table class="width100">
Member Avatar for reen.blom

You set up a class with the width of the entire table. Put the class attribute in the table tag, not the td tag.

.width100 {width: 100%;}

....

<table class="width100">

Can I do the same with height of the table?

Member Avatar for MattEvans

Yes. Providing it is within a container with a fixed size.

If the table is a direct child of the body element; apply CSS attribute: height:100% to the table, and also to the body and html elements to meet the above criteria. See the first response to this thread: http://www.daniweb.com/forums/thread26630.html.. Ignore the suggestion that it's invalid XHTML; you don't need a class for the html element anyway; since you only ever have one on a page, just use an element selector, as shown in that example.

Once the table has height/width 100%; any cells without a given height/width respectively will automatically fill to the remaining space.

The table will be height:100%+, because if it gets alot of content, that will have to go somewhere; and generally it will expand down rather than sideways, unless it's a string of unbroken characters.

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.