Changes

Jump to navigation Jump to search
no edit summary
Line 171: Line 171:  
<nowiki>
 
<nowiki>
 
*Tables must be scrollable with horizontal sliders and responsive table wrappers: <div style="overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%;"> wrapping the <table>
 
*Tables must be scrollable with horizontal sliders and responsive table wrappers: <div style="overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%;"> wrapping the <table>
 +
 
*Every table must have min-width: 520px on the <table> element so the browser scrolls instead of crushing columns
 
*Every table must have min-width: 520px on the <table> element so the browser scrolls instead of crushing columns
 +
 
*First column cells must have white-space: nowrap so key terms never break mid-word
 
*First column cells must have white-space: nowrap so key terms never break mid-word
 +
 
*Never use table-layout: fixed unless column widths are explicitly set
 
*Never use table-layout: fixed unless column widths are explicitly set
 +
 
*Never use a table for labeled lists — use flexbox rows or <dl><dt><dd> instead
 
*Never use a table for labeled lists — use flexbox rows or <dl><dt><dd> instead
 +
 
*Four or more columns must be converted to a card or flexbox layout — three columns is the maximum safe column count for Blogger
 
*Four or more columns must be converted to a card or flexbox layout — three columns is the maximum safe column count for Blogger
 +
 
*Mental model test: ask "what happens if this container is 320px wide?" If the answer is "text breaks," it needs a scroll wrapper or a non-table layout
 
*Mental model test: ask "what happens if this container is 320px wide?" If the answer is "text breaks," it needs a scroll wrapper or a non-table layout
 +
 
*Every scroll wrapper must use mandatory inline CSS directly on the div, not a class: <div style="overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; margin:1.5em 0;">
 
*Every scroll wrapper must use mandatory inline CSS directly on the div, not a class: <div style="overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; margin:1.5em 0;">
 +
 
*Every <table> must use mandatory inline CSS directly on the element, not a class: <table style="width:100%; min-width:520px; border-collapse:collapse; font-size:0.92em;">  First column <th> and <td> must also carry style="white-space:nowrap;" inline.
 
*Every <table> must use mandatory inline CSS directly on the element, not a class: <table style="width:100%; min-width:520px; border-collapse:collapse; font-size:0.92em;">  First column <th> and <td> must also carry style="white-space:nowrap;" inline.
 +
 
*No CSS classes or external stylesheets may be used for any style that table rendering depends on. All table, wrapper, cell, and header styles must be inline.
 
*No CSS classes or external stylesheets may be used for any style that table rendering depends on. All table, wrapper, cell, and header styles must be inline.
 +
 
*Every table must use <thead> for header rows and <tbody> for data rows so Blogger's parser does not strip or reorder them.
 
*Every table must use <thead> for header rows and <tbody> for data rows so Blogger's parser does not strip or reorder them.
 
</nowiki>
 
</nowiki>
Irenaeus, Siteadmin, Check users, oversight, Administrators
351,396

edits

Navigation menu