How to make q-table max-width 100%



  • I’m trying to display a q-table but it is cut off on mobile (horizontal scrolling needed). How do I make it such that the max-width is 100%? table-style=“max-width:100% !important” doesn’t work.



  • @walfin

    If it’s possible: Using Q-Markup-Table instead of Q-table will be easier to style. Because markup table actually uses a native table.

    If you see a scrollbar then the content is wider than 100%. If you would succeed at setting the width of the q-table to 100% you’ll not see the entire table. Unless you implement rowspans, word break ect. That’s pretty easy to do in native tables but I have not seen anyone do this with Q-table.



  • @dobbel I solved the problem by using a global style to override and set word-wrap and white-space to normal !important, as well as setting the inner q-table’s max-width to 100% !important.

    That said, I think this is a common enough use case that there should be an easier way to deal with this.



  • @walfin that’s great. Could you post the code?



  • @dobbel In app.styl:

    .screenwide
    	max-width 100% !important
    
    .screenwide .q-table
    	max-width 100% !important
    
    .screenwide td
    	white-space normal !important
    	word-wrap normal !important
    	hyphens manual
    
    .screenwide th
    	text-align center !important
    

    In the relevant template:

    <q-table :data="recipients" :columns="columns" :rows-per-page-options="[0]" selection="multiple" :selected.sync="selected" table-class="screenwide" dense>
    


  • @walfin

    thanks!


Log in to reply