473,287 Members | 1,419 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

Freezing the width of TABLE cells

(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.)
Jun 27 '08 #1
2 4431
Scripsit ge********@gmail.com:
(If my question is too much CSS, please point me elsewhere
and I'll post there.
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.
My tests have been on Firefox on MacOS,
and I'd settle for just getting this to work there.)
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.
The playing board is a particular <table>, and each cell is
supposed to be, say, 21px wide.
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.
Unfortunately, the
cell-widths shrink when the user lessens the width of the
browser-window (the "canvas"?).
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).
One can pretend that the
cells have no content; the cell's BGCOLOR is used for the
play of the game.
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.
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">
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.
What is supposed to be invariant is cell-width.
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; }
(Aside: The page has several nested DIVs and TABLEs, and
these may have affected my tests.)
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")
http://www.cs.tut.fi/~jkorpela/

Jun 27 '08 #2
ge********@gmail.com writes:
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.
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.
(Aside: The page has several nested DIVs and TABLEs, and
these may have affected my tests.)
and these may affect the solution so, as always, posting an example
URL is the best way to get good advice.

--
Ben.
Jun 27 '08 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Graham J | last post by:
Apologies for the partial post that mysteriously escaped as I was composing. I shall try again. For many years I have been happily and successfully coding tables such that the WIDTH specified...
4
by: N. Demos | last post by:
The following code renders as intended in IE (A TABLE, with cells of fixed width and height, inside of a DIV with fixed width and height and overflow set to hidden.) In Firefox, the table cells...
11
by: Norman L. DeForest | last post by:
Am I misunderstanding the CSS specifications or is Firefox (version 1.0.6) (and Opera) doing the wrong thing? It appears that Firefox 1.0.6 includes the border in width calculations for tables...
1
by: martin | last post by:
Hi, I have a datagrid that contains 3 colums. This is rendered to the page fine, except that I would like to be able to control the width of each table cell of the datagrid I have the following...
2
by: Rudi Hausmann | last post by:
Hi! I want to create a table with following fixed width, no matter what content is inside of the table cells: 100 40 40 (first row with 1 + 2 cells) 100 10 10 10 10 10 10...
5
by: Taras_96 | last post by:
Hi everyone, Can anyone tell me why the top paragraph block stretches across the screen (as you would expect), while the bottom div doesn't stretch across the entire screen? When I set the width...
3
by: dotcom | last post by:
hello, i am sending whole javascript code(it is for freezing html header) it works fine eith IE but not firefox scroll bar does not come var divContent = null; var divHeaderRow = null; var...
4
by: lilOlMe | last post by:
Hi there! I'm developing a "scrollable table". At first I started using CSS. It worked pretty well until I found a bug that happens when placing this table into a tabbing control... So I...
2
by: Jukka K. Korpela | last post by:
Sub titulo "Re: DIV borders different in IE7 when in td" scripsit Ben C: This seems to be the heart of the matter, and I'm trying to get a real discussion started, by moving the discussion to...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.