1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to fit wide table on mobile using css

Discussion in 'CSS' started by JEET, Jan 12, 2022 at 11:00 AM.

  1. #1
    Hi,
    How do you fit wide tables on small mobile screens?

    I have this idea of putting the table inside a DIV which has fixed max-width and overflow scroll property.
    Problem is some mobile screens are broader and some are too small, so not sure how to use fixed width.

    I am thinking something like this:

    CSS:
    .scrollingTable{
    width: 100% max-width: 600px; overflow: scroll;
    }

    HTML:
    <div class="scrollingTable">
    <table>
    <tr>
    <td> Name </td><td> age </td><td> job </td><td> salary </td>
    </tr><tr>
    <td> xyz </td><td> 25 </td><td> clerk </td><td> 10,000 </td>
    </tr>
    and so on
    </table>
    </div>

    What will be proper CSS for this?
    SEMrush
     
    Solved! View solution.
    JEET, Jan 12, 2022 at 11:00 AM IP
    SEMrush
  2. #2
    Reverse them. Set the width to 600px (or better still 37.5rem), and the max-width to 100%. Big screens won't grow larger than the width, but small screens will be shrunk by the max.
     
    deathshadow, Jan 14, 2022 at 7:12 PM IP
    JEET and sarahk like this.
  3. sarahk

    sarahk iTamer Staff

    Messages:
    27,532
    Likes Received:
    4,226
    Best Answers:
    120
    Trophy Points:
    665
    #3
    remember to add in thead and tbody to give the browser the best chance of laying it out nicely.
     
    sarahk, Jan 15, 2022 at 8:30 PM IP
    JEET likes this.
  4. JEET

    JEET Notable Member

    Messages:
    3,730
    Likes Received:
    478
    Best Answers:
    19
    Trophy Points:
    235
    #4
    JEET, Jan 17, 2022 at 5:26 PM IP