title: table header not displaying in responsive table
body: <p>i have table in my site and it's display like this.<a href="https://i.stack.imgur.com/sOOUf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sOOUf.png" alt="enter image description here"></a></p>
  
  <p>and with 320px resolution it's display like this.
  <a href="https://i.stack.imgur.com/3nkGS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nkGS.png" alt="enter image description here"></a></p>
  
  <p>so problem is that it's not displaying the header on left side like.Degree,Collage/Univercity etc.and media query for that is.</p>
  
  <pre><code>/* Force table to not be like tables anymore */
  #no-more-tables table, 
  #no-more-tables thead, 
  #no-more-tables tbody, 
  #no-more-tables th, 
  #no-more-tables td, 
  #no-more-tables tr { 
      display: block; 
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  #no-more-tables thead tr { 
      position: absolute;
      top: -9999px;
      left: -9999px;
  }
  
  #no-more-tables tr { border: 1px solid #ccc; }
  
  #no-more-tables td { 
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #eee; 
      position: relative;
      padding-left: 50%; 
      white-space: normal;
      text-align:left;
  }
  
  #no-more-tables td:before { 
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 6px;
      left: 6px;
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap;
      text-align:left;
      font-weight: bold;
  }
  
  /*
  Label the data
  */
  #no-more-tables td:before { content: attr(data-title); }
  </code></pre>
  
  <p>please help me how it can be done. i take it from <a href="http://elvery.net/demo/responsive-tables/" rel="nofollow noreferrer">Responsive Tables</a>. third example.</p>
  
  <p>my html code is</p>
  
  <pre><code>&lt;legend style="text-align:left;"&gt;Educational Qualification&lt;/legend&gt;
                                  &lt;div id="no-more-tables"&gt;
                                  &lt;code&gt;Incase of CGPA/CPI please write equivalent percentage.&lt;/code&gt;
                                  &lt;table class="edu_table" style="margin-bottom:20px;margin-top:2px;" class="col-md-12 table-bordered table-striped table-condensed cf"&gt;
                                  &lt;thead class="cf"&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Degree&lt;/th&gt;
                                      &lt;th style="width: 10px;"&gt;&lt;/th&gt;
                                      &lt;th style="width: 175px;"&gt;Degree&lt;/th&gt;
                                      &lt;th style="width: 175px;"&gt;College/University&lt;/th&gt;
                                      &lt;th style="width: 90px;"&gt;Year of Passing&lt;/th&gt;
                                      &lt;th style="width: 80px;"&gt;%&lt;/th&gt;
                                      &lt;th style="width: 175px;"&gt;Class&lt;/th&gt;
                                      &lt;th style="width: 175px;"&gt;Specialization/Branch&lt;/th&gt;
                                  &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tbody&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Doctorate&lt;/td&gt;
                                      &lt;td&gt;:&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="doc_degree"&gt;
                                      &lt;option value="0"&gt;---Select Degree---&lt;/option&gt;
                                      &lt;option value="phd" selected&gt;Phd&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="doc_collage"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="doc_year" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="doc_percentage" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="doc_class"&gt;
                                      &lt;option value="0"&gt;---Select Class---&lt;/option&gt;
                                      &lt;option value="destinction"&gt;Distinction&lt;/option&gt;
                                      &lt;option value="first class"&gt;First Class&lt;/option&gt;
                                      &lt;option value="second class"&gt;Second Class&lt;/option&gt;
                                      &lt;option value="pass class"&gt;Pass Class&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="doc_branch"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Post Graduate&lt;/td&gt;
                                      &lt;td&gt;:&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="postg_degree"&gt;
                                      &lt;option value="0"&gt;---Select Degree---&lt;/option&gt;
                                      &lt;option value="M.E/M.Tech"&gt;M.E/M.Tech&lt;/option&gt;
                                      &lt;option value="M.sc"&gt;M.sc.&lt;/option&gt;
                                      &lt;option value="M.B.A."&gt;M.B.A.&lt;/option&gt;
                                      &lt;option value="M.A."&gt;M.A.&lt;/option&gt;
                                      &lt;option value="M.Phil."&gt;M.Phil.&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="postg_collage"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="postg_year" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="postg_percentage" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="postg_class"&gt;
                                      &lt;option value="0"&gt;---Select Class---&lt;/option&gt;
                                      &lt;option value="destinction"&gt;Distinction&lt;/option&gt;
                                      &lt;option value="first class"&gt;First Class&lt;/option&gt;
                                      &lt;option value="second class"&gt;Second Class&lt;/option&gt;
                                      &lt;option value="pass class"&gt;Pass Class&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="postg_branch"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Graduate&lt;/td&gt;
                                      &lt;td&gt;:&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="grad_degree" required&gt;
                                      &lt;option value="0"&gt;---Select Degree---&lt;/option&gt;
                                      &lt;option value="B.E/B.Tech"&gt;B.E/B.Tech&lt;/option&gt;
                                      &lt;option value="B.sc"&gt;B.sc.&lt;/option&gt;
                                      &lt;option value="B.A."&gt;B.A.&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="grad_collage" required&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="grad_year" class="small_text" width="60" required&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="grad_percentage" class="small_text" width="60" required&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="grad_class" required&gt;
                                      &lt;option value="0"&gt;---Select Class---&lt;/option&gt;
                                      &lt;option value="destinction"&gt;Distinction&lt;/option&gt;
                                      &lt;option value="first class"&gt;First Class&lt;/option&gt;
                                      &lt;option value="second class"&gt;Second Class&lt;/option&gt;
                                      &lt;option value="pass class"&gt;Pass Class&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="grad_branch"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Diploma&lt;/td&gt;
                                      &lt;td&gt;:&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="diplo_degree"&gt;
                                      &lt;option value="0"&gt;---Select Degree---&lt;/option&gt;
                                      &lt;option value="diploma" selected&gt;Diploma&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="diplo_collage"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="diplo_year" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="diplo_percentage" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="diplo_class"&gt;
                                      &lt;option value="0"&gt;---Select Class---&lt;/option&gt;
                                      &lt;option value="destinction"&gt;Distinction&lt;/option&gt;
                                      &lt;option value="first class"&gt;First Class&lt;/option&gt;
                                      &lt;option value="second class"&gt;Second Class&lt;/option&gt;
                                      &lt;option value="pass class"&gt;Pass Class&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="diplo_branch"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;HSC&lt;/td&gt;
                                      &lt;td&gt;:&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="hsc_degree"&gt;
                                      &lt;option value="0"&gt;---Select Degree---&lt;/option&gt;
                                      &lt;option value="HSC" selected&gt;HSC&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="hsc_collage"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="hsc_year" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="hsc_percentage" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="hsc_class"&gt;
                                      &lt;option value="0"&gt;---Select Class---&lt;/option&gt;
                                      &lt;option value="destinction"&gt;Distinction&lt;/option&gt;
                                      &lt;option value="first class"&gt;First Class&lt;/option&gt;
                                      &lt;option value="second class"&gt;Second Class&lt;/option&gt;
                                      &lt;option value="pass class"&gt;Pass Class&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="hsc_branch"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Other&lt;/td&gt;
                                      &lt;td&gt;:&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="other_degree" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="other_collage"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="other_year" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="other_percentage" class="small_text" width="60"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;select name="other_class"&gt;
                                      &lt;option value="0"&gt;---Select Class---&lt;/option&gt;
                                      &lt;option value="destinction"&gt;Distinction&lt;/option&gt;
                                      &lt;option value="first class"&gt;First Class&lt;/option&gt;
                                      &lt;option value="second class"&gt;Second Class&lt;/option&gt;
                                      &lt;option value="pass class"&gt;Pass Class&lt;/option&gt;
                                      &lt;/select&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" name="other_branch"&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;/tbody&gt;
                                  &lt;/table&gt;
                                  &lt;/div&gt;
  </code></pre>
  
  <p>and css for edu_table is</p>
  
  <pre><code>.edu_table{
  border-collapse: collapse;
  border: 1px solid #72C02C;
  float: left;
  margin-left: 22px;
  width: 96%;
  }
  .edu_table td{
  border: 1px solid #72C02C;
  height: 60px;
  line-height: 60px;
  text-align: center;
  }
  .edu_table th{
  border: 1px solid #72C02C;
  height: 20px;
  line-height: 20px;
  }
  </code></pre>