Table height and width and borders

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

Threaded View

It appears that table height and width are calculated differently.
At least with Firefox, height appears to *exclude* border space while
width *includes* it:

 |<-------- width ------------>|
        (includes border)
 |          border             |
 |   +---------------------+   |    -----
 |   |                     |   |      ^
 |   |                     |   |      |
 |   |     table           |   |      |
 |   |                     |   |     height (does not include border)
 |   |                     |   |      |
 |   |                     |   |      v
 |   +---------------------+   |    -----
 |                             |

Does anyone know the correct behaviour so I can report this as a bug
if it is one?


With 9 48-pixel rows and columns and a 16px wide border and measuring the
inner table size (excluding the border) with the Firefox MeasureIt 0.3.1
extension (measurement position may be a pixel off as it's hard to
position the mouse accurately when MeasureIt has changed to colours to
pastel ones):

Setting width to 464px and height to 432px gives me the right inner size:

Setting both width and height to 432px crowds the cells and some pixel
columns are lost:

Not setting an overall size for the table gives me the correct 432px inner
height and width eventually (but the border is initially drawn too small
and then enlarged as the page is loaded):

As the table should appear (without the MeasureIt colouring):

I can keep the pictures there (each about 60kB to 63kB) for a week.

(and, yes, the cellspacing and padding and similar attributes will be
changed over to CSS when I get around to figuring how to do that
without breaking something.  One step at a time.)

``Why don't you find a more appropiate newsgroup to post this tripe into?
This is a meeting place for a totally differnt kind of "vision impairment".
Catch my drift?''  -- "jim" in regarding an
off-topic religious/political post, March 28, 2005

Re: Table height and width and borders

Norman L. DeForest wrote:

Quoted text here. Click to load it

According to the CSS spec, height and width should *exclude* the margin,
border and padding.

So if you specify width:200px;padding:10px;border:10px;margin:10px, the
total horizontal space taken up by the element should be 260px.

Also beware vertical margin collapsing.

Toby A Inkster BSc (Hons) ARCS
Contact Me  ~

Site Timeline