Page MenuHomePhabricator

margin-right:0 for table.wikitable
Closed, ResolvedPublic

Description

At the moment wikitable has a right margin of 1em:

table.wikitable { margin-right: 1em }

This prevents a table can use the full width.

Example: https://en.wikipedia.org/wiki/Special:Version#Installed_extensions

I suggest a right margin of 0:

table.wikitable { margin-right: 0 }

A visual change can occur on left floating tables:

{| class="wikitable" style="float:left"

-
left floating table
}

Example surrounding text right of the table.

Floating objects should always take care about their margins to the surrounding text.

An other visual change occurs on nested tables:

{|

-

{| class="wikitable"

-
left table
}

{| class="wikitable"

-
right table
}
}

The gap between the tables reduce to the defaults: cellpadding="1" cellspacing="2". I think this is acceptable.

Additionally I suggest to reduce the top margin and the bottom margin from 1em to 0.5em:

table.wikitable { margin: 0.5em 0 }


Version: unspecified
Severity: trivial

Details

Reference
bz33445

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 12:03 AM
bzimport set Reference to bz33445.

table.wikitable > caption, {

padding-bottom: 0.2em;
padding-top: 0.2em;

}

would be useful because td and th has already padding: 0.2em.

This just came up on enwiki. Tables are normally used as block elements, or floating on the left, in which case the margin is needed. Any other positioning requires a manual override.

When you add "float:left" then you can also add "margin:0 1em 1em 0".

dewiki has as shortcut for this situation

table.float-left {
clear: left;
float: left;
margin: 1em 1em 1em 0;
}

That would be a good candidate to put in Common.css, but not in Shared.css. That should be reserved the most basic element styling.

table.float-left in Common.css is ok.

But when you want to have a left or right floating table then you should care about the margins:

{| class="wikitable" style="float:left; margin: 0 1em 1em 0;"
{| class="wikitable" style="float:right; margin: 0 0 1em 1em;"

It would be possible to redefine the deprecated HTML alignments http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1 align="left" and align="right" with automatic margin:
table[align=left] {
float: left;
clear: left;
margin: 0 1em 1em 0;
}
table[align=right] {
float: right;
clear: right;
margin: 0 0 1em 1em;
}
But I think this is not necessary and doesn't make sense.

When HTML5 will be enabled, MediaWiki will automatically replace the old HTML tags with inline CSS. That means the attribute selector will not work.

Here's some universal code to put in Common.css:

div.floatleft,
table.floatleft {

float: left;
clear: left;
margin: 1em 1em 1em 0;

}
div.floatright,
table.floatright {

float: right;
clear: right;
margin: 1em 0 1em 1em;

}

I just recognize that the CSS classes floatleft and floatright (without dash) already exists in skins/common/shared.css and skins/common/commonContent.css. But they have the definition border: 0. This is not adequate for wikitable. I think thats the reason because dewiki defined the CSS classes float-left and float-right (with dash) in Common.css many years ago.

Back to my original suggestion. wikitable should not have a right margin to allow a width of 100%. When a wikitable is used as a left oder right floating object the margin should be defined by inline CSS or adequate CSS class.

Problem solved then. Both .floatleft and .floatright even provide the necessary margins. Don't worry about the border:0; this is overridden by wikitable itself.

But while the default wikitable margin might seem unnecessary, it does serve a purpose: to keep distance between the non-floating table and any right floating objects (such as infoboxes) nearby. So it cannot be removed. Closing as WONTFIX.

REOPENED. The problem is not floatleft or floatright. floatleft and floatright overwrites the margins of wikitable to get the margin on the correct side. The problem is the right margin of wikitable alone as normal non-floating table. This margin is not necessary to keep distance between any right floating object because right floating objects already have a left margin to keep distance to the normal text. The right margin of 1em for wikitable is annoying because it prevents getting the table full width when there is no floating object.

-design; the amount of spacing and visual appearance is not in question here.
That has already been decided for MediaWiki and even if that would be in need
of change, such is not subject of this bug.

This is purely a technicality.