Adjust Table into CSS based on Device Width

Question

User969992919 posted

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

Answer 1

User475983607 posted

I'm not positive but I think you're having a problem implementing media queries?  

Here's documentation that explains how to manually build media queries.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Is there any reason why you are not using an existing framework like Bootstrap?

Answer 2

User969992919 posted

Hi,

I found this article:

https://css-tricks.com/responsive-data-tables/#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

Answer 3

User71929859 posted

because there are different tables in every page so how can I tell the CSS which titles to use for which table?

Assign a class to the table and then you can change the css like below

.className td:nth-of-type(1):before { content: "Status"; }
.className td:nth-of-type(2):before { content: "Paid"; }
.className td:nth-of-type(3):before { content: "Category"; }
.className td:nth-of-type(4):before { content: "From"; }
.className td:nth-of-type(5):before { content: "To"; }
.className td:nth-of-type(6):before { content: "Total Days"; }

Your table should define like below

<table class="className"></table>