How to make q-table max-width 100%

[walfin]

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.

[dobbel]

@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.

[walfin]

@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.

[dobbel]

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

[walfin]

@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>

[dobbel]

@walfin

thanks!