我如何在上面的图片中使用css,在600px下响应?
其中第1列和第3列是"标题"在600px以下的屏幕上变成一个简单的列表视图,就像这样 -
https://jsfiddle.net/bycxL65r/7
<style>
.details td {
color: #000;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: dotted #555555 1px;
background-color: transparent;
font-size: 16px;
}
.details td strong {
text-transform: uppercase;
}
.details {
border: none;
}
@media only screen and (max-width: 600px) { }
</style>
<div class="details">
<table width="100%">
<thead></thead>
<tbody>
<tr>
<td style="text-align: left; width: 6%;"><span><strong>Led by:</strong></span></td>
<td style="text-align: left; width: 31%;"><span><strong>Corey Parker</strong></span></td>
<td style="text-align: left; width: 10%;"><span><strong>Location:</strong></span></td>
<td style="text-align: left; width: 49%;"><span>The BGB Studio, 10999 Riverside Dr., Suite 301, North Hollywood, CA 91602</span></td>
</tr>
<tr style="background-color: transparent !important;">
<td style="text-align: left; width: 6%;"><span><strong>Dates:</strong></span></td>
<td style="text-align: left; width: 31%;"><span>April 9 - May 14. Sign up NOW as this class fills fast!</span></td>
<td style="text-align: left; width: 10%;"><span><strong>Requirements:</strong></span></td>
<td style="text-align: left; width: 49%;"><span><span style="font-size: 12pt;"><span>By application or invitation only. For actors who are auditioning consistently. </span></span><span style="font-size: 12pt;">There are no make-ups for this 6-week class. <a style="color: #cd2427;" href="http://bramongarciabraun.com/cancellation-policy/">(Cancellation Policy)</a></span></span>
</td>
</tr>
<tr>
<td style="text-align: left; width: 6%;"><span><strong>Duration:</strong></span></td>
<td style="text-align: left; width: 31%;"><span><span>6 weeks. Mondays, 7pm - 10pm.</span></span><span>
</span></td>
<td style="text-align: left; width: 10%;"><span><strong>Cost:</strong></span></td>
<td style="text-align: left; width: 49%;"><span>$480 for the entire 6-week program. 2 installments ($270 & $210).
</span></td>
</tr>
</tbody>
</table>
</div>