Solution 1 :

Have you tried using the @media in css? You could give the tr you want to hide a class and then make it hidden based off screen size with visibility: hidden;

<tr class="abc ExampleClass">

@media only screen and (max-width: 600px) {
  .ExampleClass{
    visibility: hidden;
  }
}

This will hide anything using that class when the screen size is 600px or less.

Solution 2 :

You may take a look into this: vue-mq

Here’s another reference by DigitalOcean.

You can assign breakpoints based on your screen sizes. In your case, that would be XS, small, medium, and large.

I haven’t tested this out, but maybe you can do something like this (after installing the plugin):

<tr class="abc" @click="expanFunc" :mq="['medium', 'large']">
<tr class="abc" :mq="['xs', 'small']">

Problem :

I have a table with two <tr> tags as its first row (I know but unfortunately it has to be this way):

tag one:

<tr class="abc"
    @click="expanFunc">

tag two:

<tr class="abc">

I want my table to show only tag one if the screen size is either large or medium and tag two if my screen size is small or xs. I need this to happen dynamically without refreshing the page. How can I achieve this?

Comments

Comment posted by mha

That works but this way it only hides it based on screen size. Is there a way not to render it at all based on screen size?

By