Help:Table/Width: Difference between revisions

Revision as of 10:18, 10 January 2024

Revision as of 10:25, 10 January 2024

Line 1:

__TOC__

See the '''[[Help:Table#Width|Width]]''' section of [[Help:Table]]. To summarize, '''max-width''' is the preferred way to setlimit widths on tabletables.

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.

Line 28:

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.

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

{| class=wikitable

|-

! 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 || 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 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. HorizontalA scrollbars'''horizontal arescrollbar''' is created when narrowedthe screen is too narrow for the width enoughsetting. See width outside Wikipedia:

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

Line 61 ⟶ 78:

== CSS width on table as a whole ==

CSS width for overall table width works on desktop ('''horizontal scrollbar''' if screen is too narrow enoughfor width setting), and is ignored altogether on mobile.

'''Overall table width:'''

Line 75 ⟶ 92:

|-

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

|}

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

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

{| class=wikitable

|-

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

|}