title: Shrink and expand table width as screen width changes
body: <p>I want to be able to shrink the width of my table as the screen width decreases and expand the width of the table when the screen width increases.<br />
  I know that I can use <code>@media()</code> in both CSS and JavaScript but I'm trying to find a simpler way to do this.<br />
  The current issue that I am having is that another div outside of the parent div of my table is overlapping the table when the screen width shrinks.</p>
  <p>Here is the CSS for my table:</p>
  <pre><code>#course_table {
    margin: auto;
    font-family: &quot;Lato&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;
    border-collapse: collapse;
    padding: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border-radius: 4px;
    width: 100%;
  }
  </code></pre>