Currently developing a responsive webpage using HTML5 and CSS3. Within the HTML is a form with a table that collapses as the page size decreases. However, encountering an issue where the select tag does not collapse alongside other elements in the form. Below is the snippet of the HTML and CSS being used:
<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 corresponding CSS styles:
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;
}
}
The issue lies in the select tag not collapsing like the text boxes do. Seeking guidance on resolving this particular problem.