Freezing the width of TABLE cells

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
(If my question is too much CSS, please point me elsewhere
and I'll post there.  My tests have been on Firefox on MacOS,
and I'd settle for just getting this to work there.)

I'm writing a game in javascript (but JS plays little role
in the question) for an algebra class I'll be teaching.
The playing board is a particular <table>, and each cell is
supposed to be, say, 21px wide.  Unfortunately, the
cell-widths shrink when the user lessens the width of the
browser-window (the "canvas"?).  One can pretend that the
cells have no content; the cell's BGCOLOR is used for the
play of the game.

What I'd prefer, when the user shrinks the canvas, is just
that the board stick off the canvas's righthand side.

I've tried <td width="21px"> and
  <td style="width: 21px; min-width:  21px;">
unsuccessfully.  I've also tried attaching

   min-width:  <total-width of table>

to various elements, e.g, each <tr> or <tbody> or <table>, to
no effect.  It *did* work when I attached min-width to an
enclosing <div>, but this adversely affected other stuff in
the <div>.  In any case, the table-width changes dynamically
with the play of the game, since the number of columns
change.  What is supposed to be invariant is cell-width.

(Aside: The page has several nested DIVs and TABLEs, and
 these may have affected my tests.)

Re: Freezing the width of TABLE cells


Quoted text here. Click to load it

You are supposed to know or find out where to post.  But you're excused
in this case, since the problem can be seen as an HTML problem, even
though the solution is in CSS.

Quoted text here. Click to load it

Oh my. Should I stop then? You apparently have no WWW authoring problem
then. But I'll pretend that I didn't read the above.

Quoted text here. Click to load it

Why do you suppose so? For all that you can know, 21px may not be
sufficient for a single character, in the smallest font size that the
user can read.

Quoted text here. Click to load it

That may happen. Allocation of widths to columns is known to vary in
browsers, and width settings are often treated just as suggested widths
(which is actually what HTML specs say about them).

Quoted text here. Click to load it

That's poor approach. What will happen, for example, when background
colors are not used, due to browser settings or other factors?

Why didn't you post a URL? We can only see that you are hitting your
head on the wall, not what you are trying to accomplish.

Quoted text here. Click to load it

That's incorrect markup. Browsers generally ignore the px part there,
but it's still incorrect. It's not a good idea to do things wrong just
because it does not always crash a page and it isn't much more difficult
that doing things right.

Quoted text here. Click to load it

If you really wanted the cell to be empty, which is a wrong thing to
want, you could put a transparent single-pixel image there, stretched to
the width of 21 pixels:
<td><img alt="" src="transp.gif" width="21" height="21"></td>

But the real answer is to use simple CSS. For example, use <table
class="board"> in markup and a style sheet like

.board { table-layout: fixed; }
.board td { width: 21px; padding: 0; }

Quoted text here. Click to load it

Surely. And your other problems too. Nested tables are mostly just a
quick way to create problems, rather than solve them.

Jukka K. Korpela ("Yucca")

Re: Freezing the width of TABLE cells writes:

Quoted text here. Click to load it

Why not put an image in the cell?  That will stop it from shrinking in
those browsers that prefer to do that.  It can be small an invisible.

Quoted text here. Click to load it

and these may affect the solution so, as always, posting an example
URL is the best way to get good advice.


Site Timeline