デスクトップ上でのみテーブルのコンテンツを表示するにはどうすればよいですか？

Question

私は次のようなテーブルを持っています。私は何か複雑なものを試しています。デスクトップデバイスだけで "Hi"を表示する方法を理解する必要があります。つまり、モバイルデバイスから非表示にします。

私はそこにスクロールされたいくつかのonClick機能を持っています。デスクトップデバイスとモバイルデバイスの両方で使用できます。

多くの感謝！

 <div class="col-sm-9 noPadding"> 
     <div class="table-responsive"> 
      <table id="table2" class="table table-bordered"> 
      <thead> 
       <tr> 
       <th class="col-xs-2">#</th> 
       <th class="col-xs-2">Monday</th> 
       <th class="col-xs-2">Tuesday</th> 
       <th class="col-xs-2">Wednesday</th> 
       <th class="col-xs-2">Thursday</th> 
       <th class="col-xs-2">Friday</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td class="">09-10</td> 
       <td class="" onclick="highlightUsers(0,0)">Hi</td> 
       <td class="" onclick="highlightUsers(1,0)">Hi</td> 
       <td class="" onclick="highlightUsers(2,0)">Hi</td> 
       <td class="" onclick="highlightUsers(3,0)">Hi</td> 
       <td class="" onclick="highlightUsers(4,0)">Hi</td> 
       </tr> 
       <tr> 
       <td class="">10-11</td> 
       <td class="" onclick="highlightUsers(0,1)">Hi</td> 
       <td class="" onclick="highlightUsers(1,1)">Hi</td> 
       <td class="" onclick="highlightUsers(2,1)">Hi</td> 
       <td class="" onclick="highlightUsers(3,1)">Hi</td> 
       <td class="" onclick="highlightUsers(4,1)">Hi</td> 
       </tr> 
       <tr> 
       <td class="">11-12</td> 
       <td class="" onclick="highlightUsers(0,2)">Hi</td> 
       <td class="" onclick="highlightUsers(1,2)">Hi</td> 
       <td class="" onclick="highlightUsers(2,2)">Hi</td> 
       <td class="" onclick="highlightUsers(3,2)">Hi</td> 
       <td class="" onclick="highlightUsers(4,2)">Hi</td> 
       </tr> 
       <tr> 
       <td class="">12-01</td> 
       <td class="" onclick="highlightUsers(0,3)">Hi</td> 
       <td class="" onclick="highlightUsers(1,3)">Hi</td> 
       <td class="" onclick="highlightUsers(2,3)">Hi</td> 
       <td class="" onclick="highlightUsers(3,3)">Hi</td> 
       <td class="" onclick="highlightUsers(4,3)">Hi</td> 
       </tr> 
       <tr> 
       <td class="">01-02</td> 
       <td class="" onclick="highlightUsers(0,4)">Hi</td> 
       <td class="" onclick="highlightUsers(1,4)">Hi</td> 
       <td class="" onclick="highlightUsers(2,4)">Hi</td> 
       <td class="" onclick="highlightUsers(3,4)">Hi</td> 
       <td class="" onclick="highlightUsers(4,4)">Hi</td> 
       </tr> 
       <tr> 
       <td class="">02-03</td> 
       <td class="" onclick="highlightUsers(0,5)">Hi</td> 
       <td class="" onclick="highlightUsers(1,5)">Hi</td> 
       <td class="" onclick="highlightUsers(2,5)">Hi</td> 
       <td class="" onclick="highlightUsers(3,5)">Hi</td> 
       <td class="" onclick="highlightUsers(4,5)">Hi</td> 
       </tr> 
       <tr> 
       <td class="">03-04</td> 
       <td class="" onclick="highlightUsers(0,6)">Hi</td> 
       <td class="" onclick="highlightUsers(1,6)">Hi</td> 
       <td class="" onclick="highlightUsers(2,6)">Hi</td> 
       <td class="" onclick="highlightUsers(3,6)">Hi</td> 
       <td class="" onclick="highlightUsers(4,6)">Hi</td> 
       </tr> 
       <tr> 
       <td class="">04-05</td> 
       <td class="" onclick="highlightUsers(0,7)">Hi</td> 
       <td class="" onclick="highlightUsers(1,7)">Hi</td> 
       <td class="" onclick="highlightUsers(2,7)">Hi</td> 
       <td class="" onclick="highlightUsers(3,7)">Hi</td> 
       <td class="" onclick="highlightUsers(4,7)">Hi</td> 
       </tr> 
       <tr> 
       <td class="">05-06</td> 
       <td class="" onclick="highlightUsers(0,8)">Hi</td> 
       <td class="" onclick="highlightUsers(1,8)">Hi</td> 
       <td class="" onclick="highlightUsers(2,8)">Hi</td> 
       <td class="" onclick="highlightUsers(3,8)">Hi</td> 
       <td class="" onclick="highlightUsers(4,8)">Hi</td> 
       </tr> 
       <tr> 
       <td class="">06-07</td> 
       <td class="" onclick="highlightUsers(0,9)">Hi</td> 
       <td class="" onclick="highlightUsers(1,9)">Hi</td> 
       <td class="" onclick="highlightUsers(2,9)">Hi</td> 
       <td class="" onclick="highlightUsers(3,9)">Hi</td> 
       <td class="" onclick="highlightUsers(4,9)">Hi</td> 
       </tr> 
       <tr> 
       <td class="">07-08</td> 
       <td class="" onclick="highlightUsers(0,10)">Hi</td> 
       <td class="" onclick="highlightUsers(1,10)">Hi</td> 
       <td class="" onclick="highlightUsers(2,10)">Hi</td> 
       <td class="" onclick="highlightUsers(3,10)">Hi</td> 
       <td class="" onclick="highlightUsers(4,10)">Hi</td> 
       </tr> 
      </tbody> 
      </table> 
     </div><!-- table-responsive" --> 
     </div><!-- col-sm-9 --> 

Answer 1

あなたはブートストラップを使用しているので、あなたは、モバイルデバイス内の要素を非表示にするクラスhidden-xsを使用することができます。以下の例：

<tr> 
    <td class="">09-10</td> 
    <td class="hidden-xs" onclick="highlightUsers(0,0)">Hi</td> 
    <td class="hidden-xs" onclick="highlightUsers(1,0)">Hi</td> 
    <td class="hidden-xs" onclick="highlightUsers(2,0)">Hi</td> 
    <td class="hidden-xs" onclick="highlightUsers(3,0)">Hi</td> 
    <td class="hidden-xs" onclick="highlightUsers(4,0)">Hi</td> 
</tr> 

しかし、それは表示されませんので、これはあなたのonclickイベントボイドを行います。

あなたはtdの上onclickイベントを維持したい場合は、それらのtd年代幅<768pxを持つデバイスのhiddenとしてvisibilityを設定します。それによって、これらの要素は、領域と、リスナーonclickを失うことなく、隠されます。

Answer 2

media queryを使用すると、デバイスを画面サイズでターゲティングできます。 max-device-widthで再生すると、どのデバイスに何が表示されるかを制御でき、非表示にする要素をターゲットにするにはonclick属性（または別の属性）を使用できます。

@media screen and (max-device-width: 1200px) { 
    td[onclick^="highlightUsers"] { 
     visibility: hidden; 
    } 
}