I am trying to create a table as follows:
{| class="wikitable" style="background:#F00;" |- ! colspan="3" | Title |- ! style="border-width:1px 0px; width:20px" | A ! style="border-width:1px 0px;" | [[A]] ! style="border-left-width:0px; width:20px" | A |- | colspan="3" | Text |}
However, the red background “bleeds” to the right. that is, to the right of the right border of the table, there is a vertical strip of red.
On closer inspection using the developer tools, this is due to the fact that the cells of the cells are set to 0.2em and (oddly enough) are not rounded to integer pixels, giving indents of 2.54999px. Then the browser displays the table window outside the right border.
This can be fixed by individually providing px-based overlay cells. But this complicates the code, so I'm looking for a tidier solution.
EDIT: Something also worth noting is that the "not rounded" behavior is caused by the "visible" class. I tried removing the class, and the paddings are rounded.
EDIT2: Further experiments show that this is most likely because MediaWiki sets up wikitables scrolling using the jQuery .css() method (or other equivalents that DO NOT form em-based measurements. Any ideas how to overcome this?
source share