Help:Table/Width: Difference between revisions

Revision as of 17:09, 12 June 2023

Latest revision as of 16:52, 7 March 2025

(25 intermediate revisions by 3 users not shown)

Line 1:

__TOC__

See the '''[[Help:Table#Width|Width]]''' section of [[Help:Table]]. ThisTo examplesummarize, table'''max-width''' needsis tothe bepreferred onway thisto separatelimit pagewidths inon ordertables. toIt testworks iton moredivs easilytoo. inNote narrowerthough browser windows. Test itthat in both desktoptables and mobiledivs viewsthere (onneeds cellto phonesbe spaces in portraitlong orientation).lines Seeof the mobiletext or desktopwikitext. viewOtherwise linkthere atis theno bottompoint ofat thiswhich Wikipedia page. Use a cell phone to get thethat trueline mobilecan viewwrap.

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]].'''

== Line breaks ==

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:

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

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

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:

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

== Soft hyphens ==

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

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

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

== CSS width on table header cell ==

;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 ==

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

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

CSS max-width for aoverall table cellwidth '''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:'''

'''Center header width setting:'''

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

{| class=wikitable style="max-width:40em;"

|-

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

|-

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

Line 29 ⟶ 36:

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

| Bottom left cell || Bottom center cell || Bottom right cell

|}

== CSS max-width on table asheader a wholecells ==

See examples at [[Help:Table#Width]].

CSS width for overall table width works on desktop (scrollbar if narrow enough), and is ignored altogether on mobile.

== CSS max-width on tablea headertable cell ==

'''Overall table width:'''

:<code>{| class=wikitable style=width:50em</code>

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.

{| class=wikitable style=width:50em

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

{| class=wikitable

|-

! Left !! Center !! Right

Line 47 ⟶ 57:

| Middle left cell || Middle center cell || Middle right cell

|-

| Bottom left cell || Bottom center cell || style=max-width:40em; |"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."

| Bottom left cell || Bottom center cell || Bottom right cell

|}

== CSS max-width onsetting afor tablethe celloverall table ==

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

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.

*[https://developer.mozilla.org/en-US/docs/Web/CSS/width width - CSS: Cascading Style Sheets | MDN]

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

In '''mobile view''' on Wikipedia width and max-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:

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

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

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

{| class=wikitable style=max-width:40em;

*[https://www.w3schools.com/html/html_table_sizes.asp 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:'''

:<code>{| class=wikitable style=width:50em</code>

{| class=wikitable style=width:50em

|-

! Left !! Center !! Right

Line 64 ⟶ 87:

| Middle left cell || Middle center cell || Middle right cell

|-

| Bottom left cell || Bottom center cell || Bottom right cell

| Bottom left cell || Bottom center cell || style=max-width:40em; |"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 asheader a wholecell ==

CSS max-width for overalla table widthheader workscell onacts bothlike desktopa andmax-width mobilesetting. AndSo it shrinks further as screen or browser narrowswindow shrinks. PortraitIt versusshrinks landscape viewproportionally on cellmobile, too. No horizontal scrollbar in either phonemode.

''';Center header width setting:'''

'''Overall table width attempted via max-width:'''

:<code>{|! class=wikitableLeft !! style="max-width:40em;" | Center !! Right</code>

{| class=wikitable style="max-width:40em;"

|-

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

|-

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

Line 82 ⟶ 105:

| Middle left cell || Middle center cell || Middle right cell

|-

| Bottom left cell || Bottom center cell || Bottom 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."

|}