MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Created page with "→CSS placed here will be applied to all skins: <div class="responsive-table"> {| class="wikitable" style="display: flex; flex-wrap: wrap; width: 100%;" |- | Cell 1 || Cell 2 || Cell 3 || Cell 4 || Cell 5 || Cell 6 |} </div> <style> .responsive-table table { border-collapse: collapse; } .responsive-table td { border: 1px solid black; padding: 8px; flex: 1 1 16.66%; →Each cell takes ~1/6th of the width initially: box-sizing: border-box; } /* M..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* Ensure only this table is affected */ | ||
.eras-table { | |||
display: flex; | |||
flex-wrap: wrap; | |||
width: 100%; | |||
} | |||
/* Style individual cells */ | |||
. | .eras-table td { | ||
border- | flex: 1 1 16.66%; /* 6 columns: ~1/6th width each */ | ||
box-sizing: border-box; | |||
text-align: center; /* Keeps images and text centered */ | |||
min-width: 0; /* Prevents overflow issues with images */ | |||
} | } | ||
. | |||
/* Header spans full width always */ | |||
.eras-table th { | |||
flex: 1 1 | flex: 1 1 100%; | ||
} | } | ||
/* Medium resolution/zoom: 3 columns, 2 rows */ | /* Medium resolution/zoom: 3 columns, 2 rows */ | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
. | .eras-table td { | ||
flex: 1 1 33.33%; /* | flex: 1 1 33.33%; /* 3 columns: ~1/3rd width each */ | ||
} | } | ||
} | } | ||
| Line 27: | Line 28: | ||
/* Small resolution/max zoom: 1 column, 6 rows */ | /* Small resolution/max zoom: 1 column, 6 rows */ | ||
@media (max-width: 400px) { | @media (max-width: 400px) { | ||
. | .eras-table td { | ||
flex: 1 1 100%; /* | flex: 1 1 100%; /* 1 column: full width */ | ||
} | } | ||
} | } | ||
Revision as of 11:39, 27 February 2025
/* Ensure only this table is affected */
.eras-table {
display: flex;
flex-wrap: wrap;
width: 100%;
}
/* Style individual cells */
.eras-table td {
flex: 1 1 16.66%; /* 6 columns: ~1/6th width each */
box-sizing: border-box;
text-align: center; /* Keeps images and text centered */
min-width: 0; /* Prevents overflow issues with images */
}
/* Header spans full width always */
.eras-table th {
flex: 1 1 100%;
}
/* Medium resolution/zoom: 3 columns, 2 rows */
@media (max-width: 800px) {
.eras-table td {
flex: 1 1 33.33%; /* 3 columns: ~1/3rd width each */
}
}
/* Small resolution/max zoom: 1 column, 6 rows */
@media (max-width: 400px) {
.eras-table td {
flex: 1 1 100%; /* 1 column: full width */
}
}