Help:Table/Width: Difference between revisions

Revision as of 10:25, 10 January 2024

Latest revision as of 16:52, 7 March 2025

(19 intermediate revisions by 3 users not shown)

Line 1:

__TOC__

See the '''[[Help:Table#Width|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.

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 '''[[User:Timeshifter/Sandbox204|this sandbox]].''' "Lorem ipsum ..." is from [https://www.lipsum.com here].

== Line breaks ==

== CSS max-width on table as a whole ==

Line breaks '''<nowiki><br></nowiki>''' are OK to narrow header cells, and other cells. See Graham87 comments at [[Help talk:Table/Advanced#Line breaks in table cells]].

== Soft hyphens ==

'''{{tlx|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

:<code><nowiki>popu{{shy}}lation</nowiki></code>

;Which appears as

: population

;Except in narrow screens where it looks like this:

:popu-<br>lation

== CSS max-width on table as a whole ==

{{hatnote|'''Note:''' "Lorem ipsum ..." is from [https://www.lipsum.com here].}}

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:'''

:<code>{| class=wikitable style="max-width:40em;"</code>

Line 52 ⟶ 66:

*[https://www.w3schools.com/cssref/pr_dim_width.php CSS width Property].

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:

*[https://www.w3schools.com/css/css_dimension.asp CSS Height, Width and Max-width].

Line 58 ⟶ 72:

*[https://www.w3schools.com/html/html_table_sizes.asp HTML Table Sizes].

== Example. CSS width on table headeras a cellwhole ==

CSS width for overall table header cell acts like a max-width settingworks on desktop, and('''horizontal soscrollbar''' itif shrinksscreen asis browsertoo windownarrow shrinksfor width setting). It shrinksis proportionallyignored altogether on mobilethese iPhone browsers: Edge, tooChrome, Firefox, Opera. NoBut scrollbarnot inon eitheriPhone modeSafari where it works the same as on desktop.

'''Center;Overall headertable width setting:'''

:<code>!{| Left !!class=wikitable style=width:40em | Center !! Right50em</code>

{| class=wikitable style=width:50em

|-

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

|-

| Top left cell || Top center cell || Top right cell

Line 76 ⟶ 90:

|}

== CSS width on table asheader a wholecell ==

CSS width for overalla table widthheader workscell onacts desktoplike ('''horizontala scrollbar'''max-width ifsetting. screenSo isit tooshrinks narrowas forbrowser widthwindow setting),shrinks. andIt isshrinks ignored altogetherproportionally on mobile, too. No horizontal scrollbar in either mode.

'''Overall;Center tableheader width:''' setting

:<code>{|! class=wikitableLeft !! style=width:50em40em | Center !! Right</code>

{| class=wikitable style=width:50em

|-

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

|-

| Top left cell || Top center cell || Top right cell