How to stop empty table columns from autoresizing

Question

nouth -3 Junior Poster in Training

10 Years Ago

Why does the size autoresize and how can I stop it?

<!DOCTYPE html>
<style>td{border:1px solid black;width:100px;}</style>
<table>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

If there only one <td></td> then it displays as 100px but when they exceed the screensize they just bulk up by size reduction.

Like why is the top row resized in this http://jsfiddle.net/gj95X/3/
But I don't want any of them to resize.

web-design

Edited 10 Years Ago by nouth

4 Contributors
5 Replies
257 Views
3 Days Discussion Span
Latest Post 10 Years Ago Latest Post by Taywin

rtrethewey 24 Junior Poster

10 Years Ago

I'm sure someone else can give you a better technical explanation, but in general, tables are rendered with their structure given a higher priority than their dimensions. And since you don't define the window/body/document width as being sufficiently large to accommodate your <td>s at 100px wide, they get dynamically resized to fit in a single row within the browser window's dimensions. If you load this document and resize your browser, you'll see the <td>s getting resized proportionately to match.

Fixing this might be as simple as setting the 'width' of the <body> to 100px times the number of <td>s. It all depends on what you're trying to do.

nouth commented: thanks :) +1

rtrethewey 24 Junior Poster

10 Years Ago

It's possible to resize the body dynamically with some JavaScript, but it's not an optimal solution for a couple of reasons. The best approach would be to set the width in the stylesheet normally, but this means you'd have to know the number of <td>s at the start. The specifics require more information from you. What exactly are you doing? How are the <td>s generated?

Reply to this topic

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.

diafol · Answer 1 · 2014-05-11T15:30:38+00:00

It all depends on what you're trying to do.

Precisely.

Your fiddle is this:

<table>
<tr>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

Which really doesn't make any sense.

nouth -3 Junior Poster in Training · Answer 2 · 2014-05-14T11:14:54+00:00

That was just for an example but there is also the css for it.

Fixing this might be as simple as setting the 'width' of the <body> to 100px times the number of <td>s.

I added this line to the css like rtrethewey said and it fixed it.

body{width:50000px;}

But is is there a way to set the width to infinity or make it change dynamically?

Taywin 312 Posting Virtuoso · Answer 3 · 2014-05-14T17:55:18+00:00

If you want the size of table cell to be fixed when the rendering exceeds the view, add min-width:100px; to your td CSS in order to force table rendering to keep the cell width size.