Responsive Tables

Sample

Test by opening on mobile or resizing your browser window.

Classification	Title	Description
Person	Anthem	Patron AI Goddess of Robots and Infomorphs
Conflict	Advent War	"In the war between god and Euphraesti, God was a no-show."
Geography	San Joaquin Valley	Dustbowl in the dry season, Mudpot in the wet
Language	Sazashi IRP	Irish Receieved Pronunciation. The common accent of the Jadey family.
Material	Rutas BioPlastic	In goes algae and methane and out goes plastic.
Myth	A Tale of Better Times	What the last generation told itself the world once was.
Organization	This Machine (Band)	Actually not so great at killing fascists... until their frontman went solo.
Organization	Aempian Government	Would like to remind you that its predecessor was worse.
Profession	Data Archaeologist	Finds and decodes old data to piece together history.
Settlement	New Sacrament	It used to be Sacramento.
Settlement	Jadey Ireland	The seat of the Jadey Family's pharma scavenging empire.
Species	Wild Polydactyl Domesticated Tiger	A delightfully bad idea with hilariously violent ends.
Technology	Sophontic Cloning	Rarely humane or practical.
Tradition	Advent Day	A celebration of First Contact. Always a good excuse for food.
Tradition	Filial Conscription	Rich kids always get the easy work.

---

Why yes those are some of my planned Summercamp Articles, Would you like to know more?

Solution

Copy the below CSS into your Styling Panel. You will have to replace these red characters — — for it to work. Show me if you do something cool.

media max-width: 1000px {

table thead,

table tbody,

table th,

table td {

display: block;

}

table {

width: 100%;

border-collapse: collapse;

overflow-x: auto;

display: flex;

flex-direction: column;

td,

th {

flex: 1;

position: relative;

text-align: center;

width: 100% !important;

box-sizing: border-box;

border-bottom: 1px dotted #888 !important;

}

tr {

display: flex;

flex-direction: column;

border: 1px solid var --defaultBorderColor ;

margin: 20px;

border-radius: 5px;

overflow: hidden;

}

}

}