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.

  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?
     
    Solved! View solution.
    JEET, Jan 12, 2022 IP
  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 IP
    JEET and sarahk like this.
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    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 IP
    JEET likes this.
  4. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #4
    JEET, Jan 17, 2022 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #5
    Why do you still want to use <tables>?
     
    qwikad.com, Jan 20, 2022 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Probably has tabular data, in which case <table> is still the correct semantic tag. Particularly if said table has a caption, headings that are scoped to columns, headings that are scoped to rows, or a summary footer to presented on each page during print.

    Like say... a shopping cart:

    
    <table>
    	<caption>Shopping Cart</caption>
    	<thead>
    		<tr>
    			<th scope="col">Item</th>
    			<th scope="col">Unit Price</th>
    			<th scope="col">Quntity</th>
    			<th scope="col">Total</th>
    		</tr>
    	</thead><tbody>
    		<tr>
    			<th scope="row">Eb Alto Saxophone</th>
    			<td>399.99</td>
    			<td>1</td>
    			<td>399.99</td>
    		</tr><tr>
    			<th scope="row">#2 Alto Sax Reeds (pack of 10)</th>
    			<td>19.99</td>
    			<td>2</td>
    			<td>39.98</td>
    		</tr>
    	</tbody><tfoot>
    		<tr>
    			<th scope="row" colspan="3">Shipping</th>
    			<td>Free</td>
    		</tr><tr>
    			<th scope="row" colspan="3">Grand Total</th>
    			<td>439.97</td>
    		</tr>
    	</tfoot>
    </table>
    
    Code (markup):
    That is the CORRECT semantic markup for a shopping cart. Any dipshit out there telling you otherwise is packing your fudge.

    Why else would anyone use it? Or do you believe the dipshit half-tweet nose-breathing idiotic LIES of "don't use tables anymore" spewed by people who know jack F***ing shit about HTML?
     
    Last edited: Jan 20, 2022
    deathshadow, Jan 20, 2022 IP
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #7
    It would all be fine if it wasn't for cell phones. I couldn't make tables work on them (or any smaller than your laptop screens), so I got rid of them, which made my life easier.
     
    qwikad.com, Jan 20, 2022 IP
    sarahk likes this.
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Did you know you can set display:flex and flex-wrap:wrap on TR, then micromanage the sizes of the TH and TD to break it into multiple lines? Or set the TR, TH, and TD to display:block and then do whatever you want with them old-school just like the idiotic trash people do as an alternative abusing lists or worse, endless pointless DIV for nothing?

    You don't like the default appearance of HTML tags, remember that what things look like is NONE of HTML's business in the first place. You don't like it, change it. That's what CSS is for.
     
    deathshadow, Jan 20, 2022 IP
  9. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #9
    When I was replacing the <tables> the things you mentioned were not common practice. Old browsers didn't recognize display:flex or flex-wrap:wrap back then. Too late for me to try these things now. It works the way it is, no need to go back.
     
    qwikad.com, Jan 20, 2022 IP