title: Getting Select tag to be responsive
body: <p>I am currently writing a responsive page using HTML5 and CSS3, and within my HTML, i have a form. The form contains a table which is responsive and collapses as the page shrinks. The only issue i have is the select tag doesn't collapse along with other form elements. Here is my HTML and CSS - </p>
  
  <pre><code>&lt;tr&gt;    
      &lt;td id="content"&gt;Email Address&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="name" id="name" class="form"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
      &lt;td id="content"&gt;Password&lt;/td&gt;
      &lt;td&gt;&lt;input type="password" name="name" id="name" class="form"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
      &lt;td id="content"&gt;Confirm Password&lt;/td&gt;
      &lt;td&gt;&lt;input type="password" name="name" id="name" class="form"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
      &lt;td id="content"&gt;Security Question&lt;/td&gt;
      &lt;td&gt;
          &lt;select class="form"&gt;
              &lt;option value="#"&gt;--Select Question--&lt;/option&gt;
              &lt;option value="#"&gt;What Is Your Father's Middle Name?&lt;/option&gt;
              &lt;option value="#"&gt;In What Town Did You Spend Most Of Your Youth?&lt;/option&gt;
              &lt;option value="#"&gt;What Was Your Best Friend's Name When You Were A Child?&lt;/option&gt;
              &lt;option value="#"&gt;What Was Your Favorite Childhood Pet's Name?&lt;/option&gt;
              &lt;option value="#"&gt;What Was The Name Of Your Favorite Food As A Child?&lt;/option&gt;
              &lt;option value="#"&gt;What Year Did You Graduate High School?&lt;/option&gt;
              &lt;option value="#"&gt;Who Was Your Childhood Hero?&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>table { 
    width: 100%; 
    border-collapse: collapse; 
  }
  /* Zebra striping */
  tr:nth-of-type(odd) {
      background-color:#fff; /*#eee*fixed/
  }
  th { 
    /*background: #fff;*/ 
    color: black; 
    font-weight: bold; 
  }
  td, th { 
    padding: 6px; 
    /*border: 1px solid #ccc; */
    text-align: left !important;
    font-size:13px;
  }
  @media 
  only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px)  {
  
      /* Force table to not be like tables anymore */
      table, thead, tbody, th, td, tr { 
          display: block; 
      }
  }
  </code></pre>
  
  <p>while the text boxes collapses, the select tag doesn't. Please, how do i resolve this?</p>