「MediaWiki:Common.css」の版間の差分
表示
Mobile: 100% width tables |
Refined table design (rounded, soft yellow palette, hover, zebra) |
||
| 1行目: | 1行目: | ||
table.wikitable, | |||
table.infobox, | |||
table.navbox { | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border: 1px solid #e5d5a5; | |||
border-radius: 6px; | |||
overflow: hidden; | |||
background: #ffffff; | |||
box-shadow: 0 1px 2px rgba(0,0,0,0.04); | |||
margin: 1em 0; | |||
font-size: 95%; | |||
line-height: 1.55; | |||
} | |||
table.wikitable th, | |||
table.wikitable > caption { | |||
background: #fff3c4; | |||
color: #5a4500; | |||
font-weight: 600; | |||
border-bottom: 2px solid #f0c000; | |||
padding: 8px 12px; | |||
text-align: left; | |||
} | |||
table.wikitable td { | |||
padding: 8px 12px; | |||
border-bottom: 1px solid #f0e6c8; | |||
vertical-align: top; | |||
} | |||
table.wikitable tr:last-child td { | |||
border-bottom: none; | |||
} | |||
table.wikitable tbody tr:nth-child(even) td { | |||
background: #fffbf0; | |||
} | |||
table.wikitable tbody tr:hover td { | |||
background: #fff5d0; | |||
transition: background 0.12s ease; | |||
} | |||
table.infobox { | |||
width: 300px; | |||
float: right; | |||
margin: 0 0 1em 1em; | |||
} | |||
table.infobox caption { | |||
background: #f0c000; | |||
color: #2a2200; | |||
font-size: 110%; | |||
font-weight: 700; | |||
padding: 10px 12px; | |||
text-align: center; | |||
border-bottom: 1px solid #d4a800; | |||
} | |||
table.infobox th { | |||
background: #fff8de; | |||
color: #5a4500; | |||
font-weight: 600; | |||
border-bottom: 1px solid #f0e6c8; | |||
padding: 7px 10px; | |||
text-align: left; | |||
width: 35%; | |||
vertical-align: top; | |||
} | |||
table.infobox td { | |||
padding: 7px 10px; | |||
border-bottom: 1px solid #f0e6c8; | |||
vertical-align: top; | |||
} | |||
table.infobox tr:last-child th, | |||
table.infobox tr:last-child td { | |||
border-bottom: none; | |||
} | |||
table.navbox { | |||
font-size: 88%; | |||
background: #ffffff; | |||
} | |||
table.navbox th { | |||
background: #fff3c4; | |||
color: #5a4500; | |||
border-bottom: 2px solid #f0c000; | |||
padding: 8px 12px; | |||
text-align: center; | |||
font-weight: 600; | |||
} | |||
table.navbox td { | |||
padding: 6px 10px; | |||
border-bottom: 1px solid #f0e6c8; | |||
vertical-align: top; | |||
} | |||
table.navbox tr td:first-child { | |||
background: #fffbf0; | |||
font-weight: 600; | |||
color: #5a4500; | |||
width: 18%; | |||
} | |||
@media screen and (max-width: 720px) { | @media screen and (max-width: 720px) { | ||
table.wikitable, | table.wikitable, | ||
| 6行目: | 115行目: | ||
max-width: 100% !important; | max-width: 100% !important; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
font-size: 92%; | |||
} | } | ||
table.infobox { | table.infobox { | ||
| 11行目: | 121行目: | ||
margin: 0 0 1em 0 !important; | margin: 0 0 1em 0 !important; | ||
} | } | ||
table.wikitable th, | |||
table.wikitable td, | table.wikitable td, | ||
table. | table.infobox th, | ||
table.infobox td, | table.infobox td, | ||
table.navbox th, | |||
table.navbox td { | |||
padding: 6px 8px; | |||
word-break: break-word; | |||
} | |||
table.infobox th { | table.infobox th { | ||
width: 38%; | |||
} | } | ||
} | } | ||
2026年5月1日 (金) 11:09時点における版
table.wikitable,
table.infobox,
table.navbox {
border-collapse: separate;
border-spacing: 0;
border: 1px solid #e5d5a5;
border-radius: 6px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
margin: 1em 0;
font-size: 95%;
line-height: 1.55;
}
table.wikitable th,
table.wikitable > caption {
background: #fff3c4;
color: #5a4500;
font-weight: 600;
border-bottom: 2px solid #f0c000;
padding: 8px 12px;
text-align: left;
}
table.wikitable td {
padding: 8px 12px;
border-bottom: 1px solid #f0e6c8;
vertical-align: top;
}
table.wikitable tr:last-child td {
border-bottom: none;
}
table.wikitable tbody tr:nth-child(even) td {
background: #fffbf0;
}
table.wikitable tbody tr:hover td {
background: #fff5d0;
transition: background 0.12s ease;
}
table.infobox {
width: 300px;
float: right;
margin: 0 0 1em 1em;
}
table.infobox caption {
background: #f0c000;
color: #2a2200;
font-size: 110%;
font-weight: 700;
padding: 10px 12px;
text-align: center;
border-bottom: 1px solid #d4a800;
}
table.infobox th {
background: #fff8de;
color: #5a4500;
font-weight: 600;
border-bottom: 1px solid #f0e6c8;
padding: 7px 10px;
text-align: left;
width: 35%;
vertical-align: top;
}
table.infobox td {
padding: 7px 10px;
border-bottom: 1px solid #f0e6c8;
vertical-align: top;
}
table.infobox tr:last-child th,
table.infobox tr:last-child td {
border-bottom: none;
}
table.navbox {
font-size: 88%;
background: #ffffff;
}
table.navbox th {
background: #fff3c4;
color: #5a4500;
border-bottom: 2px solid #f0c000;
padding: 8px 12px;
text-align: center;
font-weight: 600;
}
table.navbox td {
padding: 6px 10px;
border-bottom: 1px solid #f0e6c8;
vertical-align: top;
}
table.navbox tr td:first-child {
background: #fffbf0;
font-weight: 600;
color: #5a4500;
width: 18%;
}
@media screen and (max-width: 720px) {
table.wikitable,
table.infobox,
table.navbox {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
font-size: 92%;
}
table.infobox {
float: none !important;
margin: 0 0 1em 0 !important;
}
table.wikitable th,
table.wikitable td,
table.infobox th,
table.infobox td,
table.navbox th,
table.navbox td {
padding: 6px 8px;
word-break: break-word;
}
table.infobox th {
width: 38%;
}
}