User:Timeshifter/Sandbox24

From Cannabis
Jump to navigation Jump to search

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.

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. Whereas 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.

In mobile view all width settings are treated like max-width settings. Both tables below narrow without forming horizontal scrollbars. This is different from tables on webpages outside Wikipedia. Overall table widths do not narrow on most pages outside Wikipedia.

Experiment with various em and other width settings on these pages outside Wikipedia:

CSS width on table cell[edit | edit source]

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[edit | edit source]

Overall table width:

{| class=wikitable style=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 Bottom right cell

CSS max-width does not work for overall table width[edit | edit source]

Overall table width attempted via max-width:

{| class=wikitable style="max-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