Getting Select tag to be responsive

Question

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 -

<tr>    
    <td id="content">Email Address</td>
    <td><input type="text" name="name" id="name" class="form"></td>
</tr>

<tr>
    <td id="content">Password</td>
    <td><input type="password" name="name" id="name" class="form"></td>
</tr>

<tr>
    <td id="content">Confirm Password</td>
    <td><input type="password" name="name" id="name" class="form"></td>
</tr>

<tr>
    <td id="content">Security Question</td>
    <td>
        <select class="form">
            <option value="#">--Select Question--</option>
            <option value="#">What Is Your Father's Middle Name?</option>
            <option value="#">In What Town Did You Spend Most Of Your Youth?</option>
            <option value="#">What Was Your Best Friend's Name When You Were A Child?</option>
            <option value="#">What Was Your Favorite Childhood Pet's Name?</option>
            <option value="#">What Was The Name Of Your Favorite Food As A Child?</option>
            <option value="#">What Year Did You Graduate High School?</option>
            <option value="#">Who Was Your Childhood Hero?</option>
        </select>
    </td>
</tr>

The CSS:

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; 
    }
}

while the text boxes collapses, the select tag doesn't. Please, how do i resolve this?

Answer 1

In your media query, set a width on the select element. This will cause the select box to be the correct width, but any text longer than the box will be cut off.

@media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) {
    /* ... */
    select {
        width: 150px;
    }
}

JSFiddle

EDIT: Applying word-wrap: break-word; to the select element allows the select option to not be cut off and to wrap to the next line, although you'll have to be careful about the length of each line because break-word can break within the word.

New JSFiddle