Adjust Table into CSS based on Device Width
-
Hi, I have a table with the following columns: Status Paid category From To Total Days It's shown perfectly on desktop but I want to adjust the width or the layout of it on mobile I am using:
@media all and (max-width: 414px) and (min-width: 375px)
but I am not sure what to set there for Tables and what's the the best way to do it? Thanks, Jassim[^]
Technology News @ www.JassimRahma.com
-
Hi, I have a table with the following columns: Status Paid category From To Total Days It's shown perfectly on desktop but I want to adjust the width or the layout of it on mobile I am using:
@media all and (max-width: 414px) and (min-width: 375px)
but I am not sure what to set there for Tables and what's the the best way to do it? Thanks, Jassim[^]
Technology News @ www.JassimRahma.com
Hi, I found this article: https://css-tricks.com/responsive-da...#comment-91835[^] it's really excellent but I have a question please. using the CSS mentioned in the article will turn all my TDs and TRs which is good except this part:
td:nth-of-type(1):before { content: "Status"; }
td:nth-of-type(2):before { content: "Paid"; }
td:nth-of-type(3):before { content: "Category"; }
td:nth-of-type(4):before { content: "From"; }
td:nth-of-type(5):before { content: "To"; }
td:nth-of-type(6):before { content: "Total Days"; }because there are different tables in every page so how can I tell the CSS which titles to use for which table? Thanks, Jassim[^]
Technology News @ www.JassimRahma.com
-
Hi, I have a table with the following columns: Status Paid category From To Total Days It's shown perfectly on desktop but I want to adjust the width or the layout of it on mobile I am using:
@media all and (max-width: 414px) and (min-width: 375px)
but I am not sure what to set there for Tables and what's the the best way to do it? Thanks, Jassim[^]
Technology News @ www.JassimRahma.com
Hi there, Enter this CSS code to make your table responsive for mobile websites. https://css-tricks.com/responsive-data-tables/[^]