User:Timeshifter/Sandbox144

''Note: All the tables below (except the last one) have   global style (at top of table wikitext). There is no header text alignment styling in individual header cells. See also: User:Timeshifter/Sandbox150 where there is no text alignment set for anything within the tables there.''

Template:Static row numbers. To see the example tables scroll down. See User:Timeshifter/Sandbox145 for a long table for testing sorting speed. See Sandbox147 for multi-row headers at the top and bottom of a table.
 * Note: There is a link to desktop or mobile view at the bottom of Wikipedia pages. You do not need to be using a mobile device to see the mobile view. Go to mobile view and narrow the browser screen to get close to the width of a cell phone screen.
 * Template:Static row numbers. In articles with tables you can narrow your browser window until some cells wrap to 2 or more lines. Note that the rows are still numbered correctly. Click on the column heads. The columns sort, but the row numbers stay the same.
 * Template talk:Static row numbers
 * Template:Static row numbers/styles.css
 * List of countries by incarceration rate. And: Subnational areas.
 * Talk:List of countries by incarceration rate
 * Category:Articles with tables with fixed row numbers
 * User talk:Jts1882
 * Phabricator T233340. Add sortability to sortable tables for readers of the mobile web site.
 * Phabricator T240106. How much control do editors have over table alignment in mobile?. Resolved. Header text in tables using class=wikitable stays center aligned unless specifically changed in each header cell. Header text in tables using class=mw-datatable follows the mediawiki table default. See examples below.
 * TemplateStyles
 * Help:Sorting and Help:Table.
 * Catalogue of CSS classes.
 * CSS Layout - width and max-width. W3Schools. Header cell width can be set with style="max-width:Xem;" - X being the number of em units. If set too small the header text will overlap into the next cell. Once the correct em numbers are found for each header cell one can zoom, or increase/decrease the font size, and not cause header text overlap. Max-width is better than breaks   in header cells. Breaks cause all kinds of weird header text laddering at narrower and narrower browser window widths. Breaks also cause unwelcome pauses in screen readers.
 * Flaglist is better than Flag in that the left side of the country names line up perfectly. The template Flagcountry is good when some additional parameters are needed. They do not let the country names wrap until forced by the browser window width or by max-width for the overall table. Country name width overrides individual header cell max-width. See User:Timeshifter/Sandbox145. It has some longer country names. Those names can be forced to wrap by putting max-width on the very top line of the table wikitext. This sets a width for the table as a whole. Selective use of max-width on particular column heads is better. See Help:Sorting section on row numbers.
 * border=1 is allowed in HTML5, and is fallback HTML for tables viewed in situations where some table CSS is blocked, not used, not loading, etc.. Or when tables are copied to email, blogs, etc..

Without static-row-numbers template

 * Removed   line.
 * Removed class=static-row-numbers

This table uses this in the top line of the table wikitext, and just above: {|class="wikitable sortable mw-datatable" border=1 style="text-align:right; max-width:25em;"

With static-row-numbers template
This table uses this in the top line of the table wikitext, and just above:

{|class="wikitable sortable mw-datatable static-row-numbers" border=1 style="text-align:right; max-width:25em;"

With template. Removed class=wikitable
This table uses this in the top line of the table wikitext, and just above:

{|class="sortable mw-datatable static-row-numbers" border=1 style="text-align:right; max-width:25em;"

With template. Removed all other classes except sortable
This table uses this in the top line of the table wikitext, and just above:

{|class="sortable static-row-numbers" border=1 style="text-align:right; max-width:25em;"

This table's only border formatting is border=1 border=1 is allowed in HTML5, and is fallback HTML for tables viewed in situations where table CSS is blocked, not used, not loading, etc..

With template. Removed all classes including sortable
This table uses this in the top line of the table wikitext, and just above:

{|class=static-row-numbers border=1 style="text-align:right; max-width:25em;"

With template. Removed all other classes. Removed border=1
This table uses this in the top line of the table wikitext, and just above:

{|class=static-row-numbers style="text-align:right; max-width:25em;"

With template. Removed all other classes except sortable. Also removed border=1
This table uses this in the top line of the table wikitext, and just above:

{|class="sortable static-row-numbers" style="text-align:right; max-width:25em;"

With template. Removed all classes including sortable. CSS border formatting added
This table uses this in the top line of the table wikitext, and just above:

{|class=static-row-numbers style="text-align:right; max-width:25em; border:solid 1px; border-collapse:collapse;"

With template. Removed all classes including sortable. CSS border formatting added, plus border=1
This table uses this in the top line of the table wikitext, and just above:

{|class=static-row-numbers style="text-align:right; max-width:25em; border:solid 1px; border-collapse:collapse;" border=1

With template. Removed all classes including sortable. CSS border formatting added, plus border=1. Removed text-align:right
This table uses this in the top line of the table wikitext, and just above:

{|class=static-row-numbers style="max-width:25em; border:solid 1px; border-collapse:collapse;" border=1