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

    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

      You may have to give your tables a different class or ID and target them that way in your CSS. But that comment shows how you can use the data-* attribute so you don't have to hard code any values in your CSS.

        And remember that, if the title of a table counts as "content", tables can have <caption> elements.

          Write a Reply...