MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 10: | Line 10: | ||
border-collapse: collapse; | border-collapse: collapse; | ||
width: 100%; | width: 100%; | ||
table-layout: fixed; /* Helps maintain column widths */ | |||
} | } | ||
/* Ensure header spans | /* Ensure header spans all columns */ | ||
.eras-table th { | .eras-table th { | ||
width: 100%; | width: 100%; | ||
text-align: center; | display: table-cell; /* Keep table behavior for spanning */ | ||
text-align: center; /* Center the title text */ | |||
} | } | ||
| Line 27: | Line 28: | ||
@media screen and (max-width: 800px) { | @media screen and (max-width: 800px) { | ||
.eras-table { | .eras-table { | ||
display: block; | display: block; /* Switch to block for responsive layout */ | ||
} | } | ||
.eras-table thead { | .eras-table thead { | ||
display: block; | display: block; /* Ensure header stays separate */ | ||
} | } | ||
.eras-table th { | .eras-table th { | ||
display: block; | display: block; /* Full width block for header */ | ||
width: 100%; | width: 100%; /* Explicitly full width */ | ||
} | } | ||
.eras-table tbody { | .eras-table tbody { | ||
| Line 41: | Line 42: | ||
} | } | ||
.eras-table tr { | .eras-table tr { | ||
display: contents; | display: contents; /* Let cells flow into flex */ | ||
} | } | ||
.eras-table td { | .eras-table td { | ||
flex: 0 0 33.333%; | flex: 0 0 33.333%; /* 3 columns */ | ||
box-sizing: border-box; | box-sizing: border-box; | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
} | } | ||