(WIP: testing responsive combo table) |
(WIP: testing responsive combo table) |
||
Line 4: | Line 4: | ||
and (max-device-width: 1024px) { | and (max-device-width: 1024px) { | ||
table, tbody, th, td, tr { | table.sf6-combotable, table.sf6-combotable td, table.sf6-combotable tbody, table.sf6-combotable th, table.sf6-combotable td, table.sf6-combotable tr { | ||
display: block; | display: block; | ||
} | } | ||
. | .sf6-combotable-header { | ||
position: absolute; | position: absolute; | ||
top: -9999px; | top: -9999px; | ||
Line 14: | Line 14: | ||
} | } | ||
tr { | table.sf6-combotable tr { | ||
margin: 0; | margin: 0; | ||
} | } | ||
table.sf6-combotable tr:nth-child(odd) { | |||
background: #00008B !important; | background: #00008B !important; | ||
} | } | ||
td { | table.sf6-combotable td { | ||
border: none; | border: none; | ||
border-bottom: 1px solid #eee; | border-bottom: 1px solid #eee; | ||
Line 30: | Line 30: | ||
} | } | ||
td:before { | table.sf6-combotable td:before { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
Line 39: | Line 39: | ||
} | } | ||
td:empty::after{content:'\00a0';visibility:hidden} | table.sf6-combotable td:empty::after{content:'\00a0';visibility:hidden} | ||
td:nth-of-type(1):before { content: "Combo"; } | table.sf6-combotable td:nth-of-type(1):before { content: "Combo"; } | ||
td:nth-of-type(2):before { content: "Position"; } | table.sf6-combotable td:nth-of-type(2):before { content: "Position"; } | ||
td:nth-of-type(3):before { content: "Damage"; } | table.sf6-combotable td:nth-of-type(3):before { content: "Damage"; } | ||
td:nth-of-type(4):before { content: "Drive Gauge"; } | table.sf6-combotable td:nth-of-type(4):before { content: "Drive Gauge"; } | ||
td:nth-of-type(5):before { content: "Super Gauge"; } | table.sf6-combotable td:nth-of-type(5):before { content: "Super Gauge"; } | ||
td:nth-of-type(6):before { content: "Difficulty"; } | table.sf6-combotable td:nth-of-type(6):before { content: "Difficulty"; } | ||
td:nth-of-type(7):before { content: "Notes"; } | table.sf6-combotable td:nth-of-type(7):before { content: "Notes"; } | ||
td:nth-of-type(8):before { content: "Video"; } | table.sf6-combotable td:nth-of-type(8):before { content: "Video"; } | ||
} | } |
Revision as of 19:45, 9 June 2023
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { table.sf6-combotable, table.sf6-combotable td, table.sf6-combotable tbody, table.sf6-combotable th, table.sf6-combotable td, table.sf6-combotable tr { display: block; } .sf6-combotable-header { position: absolute; top: -9999px; left: -9999px; } table.sf6-combotable tr { margin: 0; } table.sf6-combotable tr:nth-child(odd) { background: #00008B !important; } table.sf6-combotable td { border: none; border-bottom: 1px solid #eee; position: relative; padding: 0.2rem 6.4rem !important; } table.sf6-combotable td:before { position: absolute; top: 0; left: 6px; width: 45%; padding-right: 20px; white-space: nowrap; } table.sf6-combotable td:empty::after{content:'\00a0';visibility:hidden} table.sf6-combotable td:nth-of-type(1):before { content: "Combo"; } table.sf6-combotable td:nth-of-type(2):before { content: "Position"; } table.sf6-combotable td:nth-of-type(3):before { content: "Damage"; } table.sf6-combotable td:nth-of-type(4):before { content: "Drive Gauge"; } table.sf6-combotable td:nth-of-type(5):before { content: "Super Gauge"; } table.sf6-combotable td:nth-of-type(6):before { content: "Difficulty"; } table.sf6-combotable td:nth-of-type(7):before { content: "Notes"; } table.sf6-combotable td:nth-of-type(8):before { content: "Video"; } }