MediaWiki:WikiTable.css
From The Seven Sages of Rome
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Modern WikiTable Styles */
.wikitable {
background-color: #ffffff;
border-collapse: collapse;
margin: 1em 0;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
width: 100%;
}
.wikitable > tr > th,
.wikitable > * > tr > th {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 0.75rem;
color: #495057;
font-weight: 600;
text-align: left;
vertical-align: middle;
}
.wikitable > tr > td,
.wikitable > * > tr > td {
border: 1px solid #dee2e6;
padding: 0.75rem;
vertical-align: middle;
color: #212529;
}
.wikitable > tr:nth-child(even),
.wikitable > * > tr:nth-child(even) {
background-color: rgba(0,0,0,0.02);
}
.wikitable > tr:hover,
.wikitable > * > tr:hover {
background-color: rgba(0,0,0,0.04);
transition: background-color 0.15s ease-in-out;
}
/* Responsive table wrapper */
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
/* Sort indicators if sortable tables are used */
.wikitable th.headerSort {
cursor: pointer;
}
.wikitable th.headerSort:after {
content: '↕';
display: inline-block;
margin-left: 0.5em;
opacity: 0.5;
}
.wikitable th.headerSortUp:after {
content: '↑';
opacity: 1;
}
.wikitable th.headerSortDown:after {
content: '↓';
opacity: 1;
}
/* Caption styling */
.wikitable > caption {
padding: 0.75rem;
color: #6c757d;
text-align: left;
caption-side: top;
font-style: italic;
border-bottom: 2px solid #dee2e6;
}
/* Mobile optimizations */
@media (max-width: 768px) {
.wikitable > tr > th,
.wikitable > * > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > td {
padding: 0.5rem;
}
}