I have a table as follows, I am trying something complex, I need to figure out how to display the "Hi", only on desktop devices. Or in other words, hide it from mobile devices.
I have a few onClick functions thrown in there that I want to keep. for both desktop and mobile devices.
Many thanks!
<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 -->