Changes

=== Key instructions for an AI so it does not create defective tables ===

=== Key instructions for an AI so it does not create defective tables ===

*Never use a table for labeled lists. If the content is a question + explanation, or a term + definition, use <dl><dt><dd> or flexbox rows — never a two-column table. Tables are only for genuinely tabular, multi-column comparative data.

*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 a scroll wrapper: <div style="overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%;"> wrapping the <table>.

*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

*Every table must have a min-width on the <table> element itself (e.g. min-width:520px) so the browser cannot crush columns — it scrolls 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

*First column cells must have white-space:nowrap or a fixed min-width so key terms never break mid-word.

*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

 

*No table-layout:fixed unless column widths are explicitly set — fixed layout without explicit widths causes the crushing.

 

*Test the mental model: 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.

 

== Changing face of workplace ==

== Changing face of workplace ==