Member Avatar for nouth

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.

Edited by nouth
  • 4 Contributors
  • 5 Replies
  • 257 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for rtrethewey

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.

commented: thanks :) +1
Member Avatar for diafol

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.

Member Avatar for nouth

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?

Member Avatar for rtrethewey

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?

Member Avatar for Taywin

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.

Edited by Taywin
commented: thanks :) +1
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.