How can I modify CSS to create a responsive table in Dawn 7.0.1?

Store Design
,
1

Could somme one help me to edit default CSS table classe to make it responsible.

I want computable table with 2 or 3 colums to be breack in one column in mobile

I using shopify dawn 7.0.1 theme .

See below the CSS that handle the blog post table that I want to modifie.

table:not([class]) {
table-layout: fixed;
border-collapse: collapse;
font-size: 1.4rem;
border-style: hidden;
box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.0);
/* draws the table border */
}

table:not([class]) td,
table:not([class]) th {
padding: 1em;
border: 0.0rem solid rgba(var(--color-foreground), 0.2);
}
2

Hello Petercity,

I thought I’d try to give some sort of an answer and maybe you could follow it up with more detail! I’m not sure what your goal is but maybe you could attach a screenshot of what it looks like currently or maybe something similar to what you’d like that you might see on another website.

I’m curious if there is a specific/required reason that you want to use a table or if the theme just is built that way? Table elements and their children (tr, th, td) are inherently hard-coded in HTML with that structure. This makes it rather difficult to do a responsive table because, in my opinion, the easiest way would be to just create a script.js to re-write the table at certain screen sizes, and that’s not very efficient or easy. Alternatively you could also just add in “overflow-x: auto” to the table’s CSS styles if it’s a sizing issue and letting the user scroll is acceptable for you. There is also this article about responsive styling tables with media queries - but I’ve never used it, so I can’t really vouch for how effective it is in a full webpage. Maybe that could help!

As an entire alternative to table - I use the CSS property “display: grid” to accomplish stylistic tables and more advanced layouts. I obviously don’t know how much experience you have with HTML and CSS but if you aren’t familiar with it yet, you should check this article out and see if that’s more like what you want. This might be a lot more involved with changing theme styles - so maybe a follow up with what you’re looking for could help me or others help you find what you’re looking for! Otherwise, hopefully one of my linked sources can help you get a start.

Have a good one!