The 2016 Table-Layout Template That Fails on 360 px Phones

A layout table is not a styling choice, it is a structural claim. Screen readers announce "table with 2 rows, 3 columns" and then read cell by cell, so a visually impaired student hears layout furniture instead of headings and notice text - that alone fails WCAG 1.3.1 and 4.1.2. Second, tables are shrink-to-fit on their content: the 960 px outer width and per-cell width attributes force the table wider than 360 px, so the phone browser zooms out or scrolls sideways. There is no clean CSS hook to restack a <td> under a <tr> at MobileSafari, so the sidebar cell stays beside the content and the logo cell is clipped.

Markup changes:

1. Remove the outer table and cells; use <header>, <nav>, <main>, <aside>, <footer> and <h1>-<h2> for the notice headings.
2. Delete inline width/height and style attributes from <img>; keep alt, let CSS size the image.
3. Paste as plain text or use a paste-clean step so Word's <span style> and <font> stop overriding the stylesheet.
4. Add <meta name="viewport" content="width=device-width, initial-scale=1"> - without it, media queries never fire as intended on phones.
5. Keep one <h1> per page and a skip-to-content link before the nav.

Cascade point: inline style beats the external sheet, so even a perfect new stylesheet loses until those attributes are stripped. That is the real reason the sidebar "cannot" be moved.

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; font-size: 1rem; line-height: 1.5; }

.wrap {
  width: 100%;        /* not 960px */
  max-width: 960px;   /* cap on desktop */
  margin: 0 auto;
  padding: 0 1rem;
}

img, video, iframe {
  max-width: 100%;
  height: auto;       /* keeps aspect ratio when width shrinks */
  display: block;
}

.layout { display: block; }           /* mobile first: stack */

@media (min-width: 768px) {
  .layout { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; }
}

.notice, td, p { overflow-wrap: break-word; }

Reasoning: horizontal scroll at 360 px is almost always one element wider than the viewport. width: 960px is the direct cause, so width: 100% with max-width caps it on desktop without forcing it on phones. An <img> with a hard-coded width attribute overflows its parent even when the parent fits, so max-width: 100% is the single highest-value rule; height: auto prevents the squashed look. box-sizing: border-box makes padding count inside the declared width - otherwise width: 100% plus 1rem padding on both sides equals 100% + 2rem and reintroduces the scrollbar. Mobile-first stacking (block by default, grid only at ≥768 px) means the phone layout is the base case, not an override fighting the desktop rules. overflow-wrap handles the Word-pasted long URLs that would otherwise push the page wide on their own.

@media print {
  nav, .sidebar, .print-hide { display: none; }

  body { font-size: 12pt; color: #000; background: #fff; }

  .notice-card { break-inside: avoid; page-break-inside: avoid; }

  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; }

  @page { size: A4; margin: 15mm; }
}

Justification: (1) Navigation and the sidebar cost ink and paper and carry no information on a notice board - hiding them is what makes a 3-page printout fit on 2 sheets. (2) 12pt with pure black text is a legibility and ink decision; browsers by default skip background colours and images, so any notice styled with white text on a coloured div prints as white-on-white and vanishes. @page sets the A4 margin instead of the browser default, which is often 12.7 mm and clips the right edge. (3) break-inside: avoid stops a notice being split across two sheets, which is the failure the office actually complains about. Printing the URL after each link lets a paper reader find the source.

If these rules sit in the main stylesheet without @media print, they apply on screen too: the navigation and sidebar disappear for all 71% mobile visitors, links grow ( https://… ) text mid-sentence, and everything snaps to 12pt black. The cascade does not care about the medium unless you tell it to; @media print (or media="print" on the link element) is the only thing separating the two. Add the print block at the end of the file so its equal-specificity rules win by source order, and never use !important to force it.