locked
Adjust Table into CSS based on Device Width RRS feed

  • 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

    Sunday, July 26, 2015 3:50 AM

All replies

  • 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?

    Sunday, July 26, 2015 6:35 AM
  • 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

    Sunday, July 26, 2015 7:41 AM
  • 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>
    Thursday, August 6, 2015 1:10 AM