0

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
29
Views
3 Years
Discussion Span
Last Post by Taywin
1

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.

Votes + Comments
thanks :)
0

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.

0

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?

1

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?

1

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

Votes + Comments
thanks :)
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.