title: How to make table responsive in html5?
body: <p>I am using a table in my page. I want to make it responsive. I am using twitter bootstrap class but still it is not working. Want the circles in my page to be exactly side-by-side when the width is reduced same as it is in the desktop mode. Please help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.circle {
      width: 164px;
      height: 164px;
      border-radius: 164px;
      cursor: pointer;
      border: 1px solid #FFF;
      background: url(http://s26.postimg.org/uzuwbdxc5/img_164.png) no-repeat;
  }
  
  .smcircle {
      width: 65px;
      height: 65px;
      border-radius: 65px;
      cursor: pointer;
      border: 1px solid #FFF;
      background: url(http://s26.postimg.org/4q9tslbet/img_65.png) no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
      &lt;table id="wtable"   style="margin-top:152px; border:none;" width="100%" height="100%"  align="center"&gt;
          &lt;tr&gt;
              &lt;td colspan="51"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td rowspan="15"&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="18"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="9" rowspan="10" valign="top"&gt;
                  &lt;div class="circle" style="vertical-align:text-top; margin-top:-33px;"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td rowspan="10" valign="top"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="23" rowspan="2"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="11" rowspan="2"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="4" rowspan="3"&gt;
                  &lt;div class="smcircle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="3" rowspan="9"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="14" rowspan="3"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="4" rowspan="4"&gt;
                  &lt;div class="smcircle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="5" rowspan="5"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2" rowspan="29"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="6" rowspan="9" valign="top"&gt;
                  &lt;a class="html5lightbox" href="http://www.youtube.com/embed/YE7VzlLtp-4"&gt;
                      &lt;div class="circle"&gt;&lt;/div&gt;
                  &lt;/a&gt;
              &lt;/td&gt;
              &lt;td colspan="3" rowspan="7"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="4" rowspan="6"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="4" rowspan="4"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="2" rowspan="3"&gt;
                  &lt;div class="smcircle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="8" rowspan="4"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="4"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td rowspan="9"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="6" rowspan="9" valign="top"&gt;
                  &lt;div class="circle" style=" margin-top: -28px; "&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="2" rowspan="24"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="3" rowspan="8"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="10" rowspan="7" valign="top"&gt;
                  &lt;div class="circle" &gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td rowspan="7"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td rowspan="11"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="12" rowspan="10" valign="top"&gt;
                  &lt;div class="circle" style="margin-top:-25px;"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="7"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2" rowspan="6"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="3" rowspan="3"&gt;
                  &lt;div class="smcircle" style=" margin-top: -75px; "&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="2" rowspan="6"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="6"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2" rowspan="8"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="2" rowspan="5"&gt;
                  &lt;div class="smcircle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="2" rowspan="8"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="3" rowspan="3"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="8" rowspan="3"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="9" rowspan="9" valign="top"&gt;
                  &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td rowspan="15"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="8" rowspan="10" valign="top"&gt;
                  &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="2" rowspan="8"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2" rowspan="3"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="8" rowspan="3"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="11"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td rowspan="7"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td rowspan="11"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="9" rowspan="9" valign="top"&gt;
                  &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="8" rowspan="2"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2" rowspan="3"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="2" rowspan="2"&gt;
                  &lt;div class="smcircle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="4" rowspan="3"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td rowspan="11"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="6" rowspan="5" valign="top"&gt;
                  &lt;div class="smcircle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td rowspan="6"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td rowspan="11"&gt;
              &lt;/td&gt;
              &lt;td colspan="10" rowspan="8" valign="top"&gt;
                  &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="8"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="8" rowspan="5"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="9" rowspan="2"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="6"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="4" rowspan="5"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="10" rowspan="7" valign="top"&gt;
                  &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="2" rowspan="7"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="9" rowspan="2"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="5" rowspan="4"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="5" rowspan="7" valign="top"&gt;
                  &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td rowspan="18"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td rowspan="17"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="6" rowspan="10" valign="top"&gt;
                  &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="5" rowspan="2"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="10" rowspan="2"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="3" rowspan="9"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="4" rowspan="5" valign="top"&gt;
                  &lt;div class="smcircle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="3" rowspan="9"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="8"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="6" rowspan="5"&gt;
                  &lt;div class="smcircle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td rowspan="9"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="8"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="11" rowspan="10" valign="top"&gt;
                  &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="2" rowspan="8"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="8" rowspan="4"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="5" rowspan="6"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="4" rowspan="4"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="6" rowspan="4"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="5" rowspan="8"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="2" rowspan="4"&gt;
                  &lt;div class="smcircle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td rowspan="8"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="6"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="4" rowspan="6"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td colspan="11" rowspan="4"&gt;
                  &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td rowspan="6"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td rowspan="5"&gt;
              &lt;/td&gt;
              &lt;td colspan="10" rowspan="4"&gt;
                  &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td colspan="3" rowspan="5"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2" rowspan="4" valign="top"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="11" rowspan="3"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="11" rowspan="2"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="10"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>