98 Percent Table Width Anomaly

This is an essay. It contains the advice or opinions of one or more Wikipedia contributors. This page is not an encyclopedia article, nor is it one of Wiki's policies or guidelines, as it has not been thoroughly vetted by the community. Some essays represent widespread norms; others only represent minority viewpoints.

Shortcut WP:98WIDE

This page in a nutshell: Tables in class wikitable table-responsive or infobox, wider than 98%, trigger bottom scroll bars. Use margin-right:0 or infobox margin-left:0 to avoid the scrollbar and allow full width. IMPACT: thousands of articles.

The over-wide display has been caused by automatic extra-margin padding, as either: wider margin-right for class=wikitable table-responsive , or wider margin-left for infoboxes. This issue is about the top-level tables on a page, not about tables (with width=100%) inside other tables. Perhaps the full-name of the essay could be: "98-percent table-width anomaly triggering bottom scroll-bars for top-level, CSS-class tables". The problem does not occur for other tables, without the keyword "class="duhoc-en . For "class=wikitable table-responsive " the addition of style="margin-right:0" allows a table to fill the current width of the reader's window, and bypass the 98% width limitation.

Normally, a plain table (with no "class="duhoc-en ) can be sized to any width up to "100%" without triggering a bottom scrollbar. However, the styles for "class=wikitable table-responsive " or "wikitable table-responsive sortable" have added an implicit right-side margin-right padding that fits okay up to 98% width. When sized to 99% or 100%, those class=wikitable table-responsive formats have triggered a bottom scrollbar (since 2008, as of June 2009), appearing along the bottom of the window. To avoid this situation, use:

class=wikitable table-responsive   style="width:99%; margin-right:0"

The option for "margin-right:0" removes the right-side margin padding outside the box, rather than having a margin of 1em or 20px, or such.

Note that a full-screen table of width=101% (or higher), always triggers a bottom scrollbar, as expected, because 101%>100 (the full window width).

Normally, a plain box table (with no "class="duhoc-en ) can be sized to any width up to "100%" without triggering a bottom scrollbar. However, the various styles for "class=infobox" add an implicit left-side margin-left padding that fits okay up to 98% width. When sized to 99% or 100%, those class=infobox formats have triggered a bottom scrollbar (since 2008, as of March 2009), appearing along the bottom of the window. To avoid this situation, use:

class=infobox   style="width:99%; margin-left:0"

The option for "margin-left:0" removes the left-side margin padding outside the infobox, rather than having a margin of 1em or 20px, or such.

Although some might wish to consider the default limitation of CSS-class tables (to width=98%) as a bug, when tables are nested within other tables, then a wikitable table-responsive of 100%-width will still add the same right-side padding as at width 50%, 80% or 98%. The problem of over-wide tables occurs at the top level, when 100% is the entire window, with no "outside space" to have padded. Because of the relative viewpoint, the situation is termed an "anomaly". One editors's bug is another editor's "clever feature" when the padding is added inside other tables, when formatting a table-within-a-table, etc.

The issue of determining "top-level tables" is complicated by the use of templates: a table coded inside a template might seem to be a top-level table. However, if the template were invoked inside an outer table, then the result would generate nested tables. Instead, the table padding generated by the template is the same, whether viewing the template in stand-alone mode, or when transcluded into another page. A similar complex issue is the use of subheaders ("==Subheader==") inside a template, and determining which page contains that labeled section for editing, because appearing on a formatted page does not mean the heading exists inside that page, just inside the template displayed for that page. These problems of nesting are related to side-effects of recursion.

As a final reminder: The scrollbar problem only occurs for top-level tables in CSS classes, such as class=wikitable table-responsive or class=infobox. A plain table (with no "class="duhoc-en ) can be resized up to 100% without triggering a bottom scrollbar.

The 2 wikitable table-responsive s below show the increased width, when the option is added to set: style="margin-right:0". This difference in width has occurred since 2008, and setting the margin is a reliable option to allow wider tables.

Format when class=wikitable table-responsive :

Format when class=wikitable table-responsive style="margin-right:0":