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:

    	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


Log in to reply