响应表-2列,左侧有标题

时间:2018-03-07 01:06:00

标签: html css html-table

Table - Desktop View

我如何在上面的图片中使用css,在600px下响应?

其中第1列和第3列是"标题"在600px以下的屏幕上变成一个简单的列表视图,就像这样 -

Table - Mobile View

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 &amp; $210).
</span></td>
      </tr>
    </tbody>
  </table>
</div>

0 个答案:

没有答案