(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 <tror <tbodyor <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.)