Forum:Table spacing

Hi, in a template I'm using nested tables inside a cell, but I cannot removing the little spacing between the tables, basically I have a series of inline tables and I want them to seem attached together:

How can I do that?


 * This may not be the best method, but you could alter the margin size of the last two tables.




 * Or change the display from "inline-block" to "table-cell". --


 * But since IE8 and earlier don't support them I prefer to avoid it... what cause that little space between the tables?
 * Try changing to another browser like Google Chrome &mdash;  S a m  Wang  12:05, April 22, 2012 (UTC)


 * He can hardly choose the browser of his wiki's visitor, Sam.


 * IE8 supports table-cell as far as I know. IE7 doesn't. That's true.


 * I think the problem with inline-blocks is they're rendered like words and then the word-spacing and the letter-spacing properties apply. This is what happens when you set both of them to "0px":



According to Wikia's supported browsers list, IE < 8 are unsupported, so that should be no issue. No wonder no attempt has been made to support Netscape 4. 13:40, April 22, 2012 (UTC)


 * Thanks! Those N4 screens were funny! :) --

The word and letter spacing proprieties should do the trick, I actually already tried the letter-spacing, but alone, that's why it didn't work. Thank you.


 * Ooooooh. This is embarrassing. I just noticed that I accidentally copied over the margin from Dser's post :(


 * So, no, this doesn't work. Not all by itself. You would have to set the letter-spacing and/or word-spacing to negative values. That only works if you have a precise idea of the font-size across browsers. With this solution you run into the exact same problems you would run into with Dser's solution.


 * I would suggest going back to the table-cell display then. Or try something else entirely.


 * You could e.g. put all those tables in another table with cellspacing and cellpadding set to zero:


 * Or you could float them without clearing them:


 * Or do something nutty and set the font-size of the surrounding container to zero:


 * There are surely more solutions... --

Ok, I'll explain better what I want to achieve: it's related to Forum:Gallery template, I have a main container (I'm using a table) and I want to add in it character mini-profiles, basically I want to replace this sort of template. I want the elements to be displayed inline, so they will adapt to the main table's width. An example:

Less than maximum width

More then maximum width



(I used a random image that I found here). Ok now I'm a bit lost... why now there is no spacing between the elements? I copied the first code I posted! And why in my wiki there still is a little spacing? I'll try to check my CSS... anyway seems one problem is solved, now is it possible to remove the space between the two rows?


 * There aren't two rows. There's a single row that's too wide for the table and broken in two halfs. You might want to correct that first.

No, actually I want it that way, but then is possible to remove the spcae between the two halves (or two lines depending how you consider them)?


 * Hm. So there are always three subtables per row. And how many rows/subtables are there? And the width of the subtables - is that known?


 * An example of gallery would be this. There are maximum 5 elements per rows (max in oasis), but in monobook can be more (with the inline sub-table the width changes accordingly). The images are all 120x120. I'm trying some examples in my sandbox, it's beginning to look like what I want, but I don't understand why in monobook the colors are totally broken... (the color are set by a CSS class in the main table).


 * Monobook has some weird default table styles that are conflicting with your css styling. Basically, Monobook has a default  for all tables. If you want to get around that, you should add the following code to your Monobook.css:
 * --Gardimuer { ʈalk } 03:23, April 23, 2012 (UTC)
 * --Gardimuer { ʈalk } 03:23, April 23, 2012 (UTC)


 * Thank you, I fixed it. Now I have to figure out why it creates an extra spacing when there are too many elements (it exceed even the parent width) and how I can remove it. Any ideas? Well if it's possible...


 * Ah but it simply stay with the width of the parent...


 * Does that mean the problem is solved? Or not?


 * I think that this solution has its limits, so nothing we ca do about it. For now I don't have any other problems, if I'll have some I'll post here again. Thank you.