Main Page:mediawiki:common.css: Difference between revisions
(Created page with "→: .table-responsive { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; →: } →: .table-responsive:focus { outline: 2px solid #777; outline-offset: 2px; } →: .table-responsive > table { width: 100%; border-collapse: collapse; } →: .wikitable t...") |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Universal responsive wrapper behavior */ | /* Universal responsive wrapper behavior */ | ||
.table-responsive { | .table-responsive { | ||
display: block; | display: block; | ||
| Line 7: | Line 8: | ||
/* Make focused wrappers keyboard-visible (a11y) */ | /* Make focused wrappers keyboard-visible (a11y) */ | ||
.table-responsive:focus { | .table-responsive:focus { | ||
outline: 2px solid #777; | outline: 2px solid #777; | ||
| Line 34: | Line 36: | ||
/* Opt-out: any table with .no-responsive will not be wrapped */ | /* Opt-out: any table with .no-responsive will not be wrapped */ | ||
.no-responsive { /* marker class only */ } | .no-responsive { /* marker class only */ } | ||
/* (Optional) tiny-screen tweaks */ | /* (Optional) tiny-screen tweaks */ | ||
@media (max-width: 480px) { | @media (max-width: 480px) { | ||
.wikitable td, .wikitable th { font-size: 14px; } | .wikitable td, .wikitable th { font-size: 14px; } | ||
} | } | ||
/* small arrows for sortable columns */ | |||
table.sortable th.headerSortUp:after { content: " ▲"; } | |||
table.sortable th.headerSortDown:after { content: " ▼"; } | |||
/* keep word-wrap and mobile scroll (if you haven't already) */ | |||
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; display:block; } | |||
.wikitable td, .wikitable th { white-space: normal; word-break: break-word; padding:6px 8px; } | |||
Latest revision as of 17:42, 26 August 2025
/* Universal responsive wrapper behavior */
.table-responsive {
display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}
/* Make focused wrappers keyboard-visible (a11y) */
.table-responsive:focus {
outline: 2px solid #777; outline-offset: 2px;
}
/* Keep tables full-width inside wrapper */ .table-responsive > table {
width: 100%; border-collapse: collapse;
}
/* Better text wrapping on small screens */ .wikitable td, .wikitable th {
white-space: normal; word-break: break-word; padding: 6px 8px;
}
/* Optional: sticky header inside scroll container */ .table-responsive thead th {
position: sticky; top: 0; z-index: 1;
}
/* Opt-out: any table with .no-responsive will not be wrapped */
.no-responsive { /* marker class only */ }
/* (Optional) tiny-screen tweaks */
@media (max-width: 480px) {
.wikitable td, .wikitable th { font-size: 14px; }
}
/* small arrows for sortable columns */
table.sortable th.headerSortUp:after { content: " ▲"; } table.sortable th.headerSortDown:after { content: " ▼"; }
/* keep word-wrap and mobile scroll (if you haven't already) */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; display:block; } .wikitable td, .wikitable th { white-space: normal; word-break: break-word; padding:6px 8px; }