See the Width section of Help:Table. This example table needs to be on this separate page in order to test it more easily in narrower browser windows. Test it 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 narrow your browser window. Note that the first table narrows along with the browser window. The second table does not, and it needs the horizontal scrollbar to see all of the table.
On Wikipedia CSS width settings in any table cell (header or data) are treated more like a max-width setting, and the table narrows as the browser window narrows.
A CSS width setting for the overall table in desktop view acts like width settings on divs and tables on webpages outside Wikipedia. Horizontal scrollbars are created when narrowed enough. See width outside Wikipedia:
In mobile view on Wikipedia width and max-width settings on the table as a whole are ignored altogether. 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:
Experiment with em and other width settings on another page outside Wikipedia:
CSS width on table cell
CSS width for table header cell works on desktop, and acts proportionally on mobile. No scrollbar on 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 |
CSS width on table as a whole
CSS width for overall table width works on desktop (scrollbar if narrow enough), and is ignored altogether on mobile.
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 max-width on table as a whole
CSS max-width for overall table width is ignored altogether on both mobile and desktop.
Overall table width attempted via max-width:
{| class=wikitable style="max-width:55em;"
| 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 |