Note I am using the http://bootstrap-table.com library, specifically the Bulma version.
See below for visual understanding, but here is the gist. I have a large table with lots of info, when the screen is not big enough, the table becomes scrollable. I want the table to shrink so it ALWAYS fits the screen size. Currently, I do have mobile cards, but I don't want that for my computer users of course. I have tried EVERY CSS and other solution online but it seems the bootstrap-table is overwriting it and I cannot get it to work. I checked their docs and Google info for that library to no avail. Any advice or help is VERY much appreciated.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/themes/bulma/bootstrap-table-bulma.min.css">
<div class="wrapper is-desktop is-mobile">
<table data-show-columns-toggle-all="true" classes="table-sm" data-sortable="true" data-filter-control="true" class="is-narrow table-responsive" data-toggle="table" data-search-highlight="true" data-advanced-search="true" data-show-columns="true" data-show-fullscreen="true" data-id-table="advancedTable" data-mobile-responsive="true" data-sticky-header="true" data-pagination="true" data-search="true">
<thead>
<tr>
<th data-sortable="false" searchable="false">Favorite</th>
<th data-sortable="false" searchable="false">Image</th>
<th data-field="CRN" data-sortable="true" searchable="true">CRN</th>
<th data-field="Subject" data-sortable="true" searchable="true">Subject</th>
<th data-field="Course" data-sortable="true" searchable="true">Course</th>
<th data-field="Credits" data-sortable="true" searchable="true" >Credits</th>
<th data-field="Title" data-sortable="true" searchable="true">Title</th>
<th data-field="Days" data-sortable="true" searchable="true">Days</th>
<th data-field="Times" data-sortable="true" searchable="true" >Times</th>
<th data-field="Instructors" data-sortable="true" searchable="true">Instructor</th>
<th data-field="Attribute" data-sortable="true" searchable="true">Attribute</th>
<th data-field="InstructorDiff" data-sortable="true" searchable="true">Instructors Difficulty</th>
<th data-field="InstructorRating" data-sortable="true" searchable="true">Instructors Rating</th>
<th data-field="WouldTakeAgain" data-sortable="true" searchable="true">Would Take Again</th>
<th data-field="Comments" data-sortable="false" searchable="false">Comments</th>
</tr>
</thead>
<tbody>
{% for course in courses %}
<tr>
<th scope="favorite_course">
<form action="/favorite_courses/api/add_course/{{course.id}}" method="post">
<button class="button is-success" name="foo" value="upvote">+</button>
</form>
</th>
{% if instructors[course.instr]['image'] == None or instructors[course.instr]['image'] == "" %}
<div class="image">
</div>
<td class="is-image-cell">
<div class="image">
<img src="https://www.yu.edu/sites/default/files/default_images/Placeholder_0.png" style="max-height:100px;width:100px;" class="is-rounded instr-profile">
</div>
</td>
{% else %}
<div class="image">
</div>
<td class="is-image-cell">
<div class="image">
<img src="{{instructors[course.instr]['image']}}" class="is-rounded instr-profile" style="max-height:100px;width:100px;">
</div>
</td>
{% endif %}
<td data-label="CRN">{{course.crn}}</td>
<td data-label="Subject">{{course.subj}}</td>
<td data-label="Course">{{course.crse}}</td>
<td data-label="Credits">{{course.cred}}</td>
<td class="instructor" data-label="Title">{{course.title}}</td>
<td data-label="Days">{{course.days}}</td>
<td data-label="Times">{{course.time}}</td>
<td data-label="Instructor">{{course.instr}}</td>
<td data-label="Attribute">{{course.attribute}}</td>
<td width="30" data-width-unit="%" data-label="Instructors Difficulty">
<div class="columns">
<div class="column">
<p class="bd-notification is-info"><center>{{instructors[course.instr]['profDiff']}}%</center></p>
<div class="columns is-mobile">
<div class="column">
{% if instructors[course.instr]['profDiff'] | int >= 75 %}
<progress max="100" class="progress is-small is-danger" value="{{instructors[course.instr]['profDiff']}}">{{instructors[course.instr]['profDiff']}}</progress></td>
{% elif instructors[course.instr]['profDiff'] | int >= 50 %}
<progress max="100" class="progress is-small is-warning" value="{{instructors[course.instr]['profDiff']}}">{{instructors[course.instr]['profDiff']}}</progress></td>
{% else %}
<progress max="100" class="progress is-small is-primary" value="{{instructors[course.instr]['profDiff']}}">{{instructors[course.instr]['profDiff']}}</progress></td>
{% endif %}
</div>
</div>
</div>
</div>
</td>
<td data-label="Instructors Rating" class="is-progress-cell">
<div class="columns">
<div class="column">
<p class="bd-notification is-info"><center>{{instructors[course.instr]['profRating']}}%</center></p>
<div class="columns is-mobile">
<div class="column">
{% if instructors[course.instr]['profRating'] | int >= 75 %}
<progress max="100" class="progress is-small is-primary" value="{{instructors[course.instr]['profRating']}}">{{instructors[course.instr]['profRating']}}</progress></td>
{% elif instructors[course.instr]['profRating'] | int>= 50 %}
<progress max="100" class="progress is-small is-warning" value="{{instructors[course.instr]['profRating']}}">{{instructors[course.instr]['profRating']}}</progress></td>
{% else %}
<progress max="100" class="progress is-small is-danger" value="{{instructors[course.instr]['profRating']}}">{{instructors[course.instr]['profRating']}}</progress></td>
{% endif %}
</div>
</div>
</div>
</div>
</td>
<td data-label="Would Take Again" class="is-progress-cell">
<div class="columns">
<div class="column">
<p class="bd-notification is-info"><center>{{instructors[course.instr]['profWouldTakeAgain']}}%</center></p>
<div class="columns is-mobile">
<div class="column">
{% if instructors[course.instr]['profWouldTakeAgain'] | int >= 75 %}
<progress max="100" class="progress is-small is-primary" value="{{instructors[course.instr]['profWouldTakeAgain']}}">{{instructors[course.instr]['profWouldTakeAgain']}}</progress>
{% elif instructors[course.instr]['profWouldTakeAgain'] | int >= 50 %}
<progress max="100" class="progress is-small is-warning" value="{{instructors[course.instr]['profWouldTakeAgain']}}">{{instructors[course.instr]['profWouldTakeAgain']}}</progress>
{% else %}
<progress max="100" class="progress is-small is-danger" value="{{instructors[course.instr]['profWouldTakeAgain']}}">{{instructors[course.instr]['profWouldTakeAgain']}}</progress>
{% endif %}
</div>
</div>
</div>
</div>
</td>
<!-- {% include 'course_list/comments.html' %} -->
{% endfor %}
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/themes/bulma/bootstrap-table-bulma.min.js"></script>Video reference: https://streamable.com/grv9iy
