Main Page:mediawiki:common.css: Difference between revisions

From Ekatra Wiki
Jump to navigation Jump to search
(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
Line 40: Line 40:
   .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; }

Revision as of 17:40, 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; }