Tabledemo:MediaWiki:Common.css

/* 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; }

/* Ensure sorting indicators are visible on mobile */ .sortable th {

   position: relative;
   padding-right: 20px !important;

}

.sortable th:after {

   content: " ⇅";
   position: absolute;
   right: 5px;
   opacity: 0.5;
   font-size: 12px;

}

.sortable th.headerSortUp:after {

   content: " ⇑";
   opacity: 1;

}

.sortable th.headerSortDown:after {

   content: " ⇓";
   opacity: 1;

}