Help:Table/Width

See the Width section of Help:Table. To summarize, max-width is the preferred way to limit widths on tables. It works on divs too. Note though that in both tables and divs there needs to be spaces in long lines of text or wikitext. Otherwise there is no point at which that line can wrap. {{shy}} can be placed in long header words like "population" to add a soft hyphen when the screen is narrow (as on portrait view on cell phones):

Wikitext: popu{{shy}}lation
Which appears as: population
Except in narrow screens where it looks like this: popu-
lation

These example tables need to be on this separate page in order to test them more easily in narrower browser windows. Test them in both desktop and mobile views (on cell phones in portrait orientation). See the mobile or desktop view link at the bottom of this Wikipedia page. Use a cell phone to get the true mobile view.

In desktop view on a PC narrow your browser window. On a Wikipedia page that has only text (no tables) a horizontal scrollbar will show up well before the text is unable to wordwrap further. For example see this sandbox.

CSS max-width on table as a whole

CSS max-width for overall table width works on both desktop and mobile. And it shrinks further as screen or browser narrows. Portrait versus landscape view on cell phone.

Overall table width attempted via max-width: {| class=wikitable style="max-width:40em;"

Left	Center	Right
Top left cell	Top center cell	Top right cell
Middle left cell	Middle center cell	Middle right cell
Bottom left cell	Bottom center cell	"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

CSS max-width on table header cells

See examples at Help:Table#Width.

CSS max-width on a table cell

CSS max-width for a table cell works on both desktop and mobile. And it shrinks further as screen or browser narrows. Portrait versus landscape view on cell phone.

| Bottom left cell || Bottom center cell || style=max-width:40em; |"Lorem ipsum ...

Left	Center	Right
Top left cell	Top center cell	Top right cell
Middle left cell	Middle center cell	Middle right cell
Bottom left cell	Bottom center cell	"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

CSS width setting for the overall table

A CSS width setting for the overall table in desktop view acts like width settings on divs and tables on webpages outside Wikipedia. A horizontal scrollbar is created when the screen is too narrow for the width setting. See width outside Wikipedia:

In mobile view on Wikipedia width settings on the table as a whole are ignored altogether for the most part (see next section). In mobile view all the tables below narrow without forming horizontal scrollbars. This is different from tables on webpages outside Wikipedia. Overall table widths (as opposed to max-widths) do not narrow on most pages outside Wikipedia. See max-width outside Wikipedia:

CSS Height, Width and Max-width.

Experiment with em and other width settings on another page outside Wikipedia:

HTML Table Sizes.

Example. CSS width on table as a whole

CSS width for overall table width works on desktop (horizontal scrollbar if screen is too narrow for width setting). It is ignored altogether on these iphone browsers: Edge, Chrome, Firefox, Opera. But not on iphone Safari where it works the same as on desktop.

Overall table width: {| class=wikitable style=width:50em

Left	Center	Right
Top left cell	Top center cell	Top right cell
Middle left cell	Middle center cell	Middle right cell
Bottom left cell	Bottom center cell	Bottom right cell

CSS width on table header cell

CSS width for a table header cell acts like a max-width setting. So it shrinks as browser window shrinks. It shrinks proportionally on mobile, too. No horizontal scrollbar in either mode.

Center header width setting: ! Left !! style=width:40em | Center !! Right

Left	Center	Right
Top left cell	Top center cell	Top right cell
Middle left cell	Middle center cell	Middle right cell
Bottom left cell	Bottom center cell	Bottom right cell