html - 使用 css 对表格进行媒体查询

Question

HTML 代码

<div style="background-color: #e4e4e4">
  <table align="center" border="0" cellpadding="0" cellspacing="0" class=
  "table" width="600">
    <tr>
      <td class="cell">
        <table border="0" cellpadding="0" cellspacing="0" style=
        "background-color: #FFFFFF" width="100%">
          <tr>
            <td>
              <table>
                <tr>
                  <td><span style="font-size: 10px;color:#666666">If this email
                  doesn't display properly you can view it in your web
                  browser<a href="http://www.worldtravelhub.com.au" style=
                  "text-decoration:underline;color:blue;" target=
                  "_blank">www.worldtravelhub.com.au</a></span></td>
                </tr>
              </table>

              <table align="center" border="0" cellpadding="10" cellspacing="0"
              class="w100">
                <tr>
                  <td><img border="0" height="108" src=
                  "images/high_quality_logo_wth.png" style="display: block"
                  width="500"></td>
                </tr>
              </table>

              <table align="right" border="0" cellpadding="10" cellspacing="0"
              class="w100">
                <tr>
                  <td align="right" class="w100">
                  <!--<font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:22px"><strong>WorldTravelHub</strong></font><br>
                      <font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:18px">Newsletter
                        </font>--></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

        <table border="0" cellpadding="0" cellspacing="0" style=
        "background-color: #FFFFFF" width="100%">
          <tr>
            <td>
              <table align="left" border="0" cellpadding="10" cellspacing="0"
              class="w100" width="290">
                <!--<tr>
                    <td class="w100"><div class="left_align" face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:11px"><strong>We'll get you the CHEAPEST flights to the</strong></font>

    <font><span style="color:#ff5313;font-size:29px;">Indian Subcontinent </span></font>
    </div>

                    </td>
                  </tr>-->
              </table>

              <table align="right" border="0" cellpadding="10" cellspacing="0"
              class="w100" width="290">
                <!-- <tr>
                      <td class="w100">
                         <img class="stamp" src="images/stamp.png" alt="CHEAPEST GAURANTEE" />

    </td>
                    </tr>-->
              </table>
            </td>
          </tr>
        </table>

        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <td>
              <!--<img src="images/600.png" border="0" style="display:block">-->

              <div class="bgimg">
                <p class="cheapest"><span class="bold">We'll get you the
                CHEAPEST flights to the</span><br>
                <span class="indsub">Indian Subcontinent</span></p>
              </div>
            </td>
          </tr>
        </table>

        <table border="0" cellpadding="0" cellspacing="0" style=
        "background-color: #fff" width="100%">
          <tr>
            <td>
              <table align="left" border="0" cellpadding="10" cellspacing="0"
              class="w100" width="100%">
                <tr>
                  <td class="w100"><span class="checkout-price"><span style=
                  "font-size:10px;">FROM</span> $850* 
                  <!--<sup style="font-size:8px;margin-top:5px;">From</sup><sub>$850*</sub>--></span></td>
                </tr>
              </table>

              <table align="right" border="0" cellpadding="10" cellspacing="0"
              class="w100" width="290">
                <tr>
                  <td class="w100">
                    <!--<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:14px"><strong>Lorem ipsum dolor sit amet</strong></font>-->

                    <div style="text-align: center; margin-right: 30px;">
                      <span style=
                      "color: #e62529; font-size: 20px; font-weight: bold;">Toll
                      Free: 1800 984 045</span><br>
                      <span style=
                      "font-size: 11px; letter-spacing: 2px;">info@worldtravelhub.com.au</span><br>

                      <span style=
                      "font-size: 11px; letter-spacing: 1px;">www.worldtravelhub.com.au</span>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

        <table border="0" cellpadding="0" cellspacing="0" style=
        "background-color: white" width="100%">
          <tr>
            <td>
              <table align="center" border="0" cellpadding="10" cellspacing="0"
              class="w100" width="100%">
                <tr>
                  <td class="w100">
                    <p style="text-align: center;"><span style=
                    "font-size: 22px;color:#e62529;letter-spacing:3px;font-weight:bold;">
                    Book online <span style="color:#000;">24/7</span> at
                    worldtravelhub.com.au</span><br>
                    <span style="font-size:8px;">*A Verifiable written quote
                    from another Australian registered travel businesses must
                    be aproved and fare quoted must be generally avaliable to
                    the public in the market and must be for the same date,seat
                    class,fare category and airline and given to us before we
                    make a booking for the customer.The quote must be for
                    booked fares originating in Australia to Indian
                    subcontinent.Lics No <span style=
                    "font-weight:bold;">2TA6049</span></span></p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

        <table border="0" cellpadding="0" cellspacing="0" style=
        "background-color: #888888" width="100%">
          <tr>
            <td>
              <table align="left" border="0" cellpadding="10" cellspacing="0"
              class="w100" width="290">
                <tr>
                  <td class="w100"><strong>WorldTravelHub</strong><br>
                  Suite 4, 2 Kendall St,<br>
                  Harris Park NSW 2150</td>
                </tr>
              </table>

              <table align="right" border="0" cellpadding="10" cellspacing="0"
              class="w100" width="290">
                <tr>
                  <td align="right" class="w100"><strong>Phone:</strong> +61 2
                  8005 2797<br>
                  <strong>Fax:</strong>+61 2 8005 4237<br>
                  <strong>Email:</strong> info@worldtravelhub.com.au</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

        <table border="0" cellpadding="10" cellspacing="0" width="100%">
          <tr>
            <td>If this email doesn't display properly you can view it in your
            web browser<br>
            <br></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div><!--=========-->

CSS 代码

body {
 background-color:#e4e4e4;
 font-family:'PT Sans Narrow',Arial,sans-serif
}

table {
  border-collapse:collapse;
  mso-table-lspace:0;
  mso-table-rspace:0
}

.ExternalClass * {
  line-height:100%
}

@media only screen and (max-width: 480px) {
div,p,a,li,td {
  -webkit-text-size-adjust:none!important
}

table[class="table"],td[class="cell"] {
  width:300px!important
}

img {
  display:block!important;
  max-width:100%!important
}

[class].hide {
  display:none!important
}

[class].w100 {
  width:100%!important;
  text-align:left!important
}

.cheapest {
  margin-left:5px;
  font-size:10px;
  padding-top:10px;
  font-family:'PT Sans Narrow',Arial,sans-serif;
  max-width:100%!important
}

.bold {
  font-weight:700
}

.indsub {
  color:#e62529;
  font-size:22px;
  font-weight:700
}

.checkout-price {
  top:400px
}/*.bgimg {
            background-image: url('images/wth_map.jpg');
            width: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            height: 0;
            padding-bottom: 77%; 
            background-repeat: no-repeat;
        }*/

}

@media only screen and (max-width: 767px) {
div,p,a,li,td {
/*-webkit-text-size-adjust: none !important;*/
}

table[class="table"],td[class="cell"] {
  width:300px!important
}

img {
  display:block!important;
  max-width:100%!important
}

[class].hide {
  display:none!important
}

[class].w100 {
  width:100%!important;
  text-align:left!important
}

.cheapest {
  margin-left:5px;
  font-size:10px;
  padding-top:10px;
  font-family:'PT Sans Narrow',Arial,sans-serif;
  max-width:100%!important
}

.bold {
  font-weight:700
}

.indsub {
  color:#e62529;
  font-size:22px;
  font-weight:700
}

.checkout-price {
  top:400px
}
}

.bgimg {
  background-image:url(images/wth_map.jpg);
  width:100%;
  background-size:contain;
  background-repeat:no-repeat;
  height:0;
  padding-bottom:77%;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
  background-repeat:no-repeat
}

.checkout-price {
  position:absolute;
  top:590px;
  margin-left:25px;
  width:120px;
  height:120px;
  font:24px/120px Helvetica,Arial,sans-serif;
  color:#fff;
  text-align:center;
  text-shadow:0 -1px 1px rgba(black,.3);
  text-indent:-1px;
  letter-spacing:-1px;
  background:#e54930;
  border:1px solid;
  border-color:#b33323 #ab3123 #982b1f;
  border-radius:60px
}

.checkout-price:before {
  content:'';
  position:absolute;
  top:3px;
  bottom:3px;
  left:3px;
  right:3px;
  border:2px solid #f5f8fb;
  border-radius:60px
}

.cheapest {
  margin-left:80px;
  font-size:14px;
  padding-top:22px;
  font-family:'PT Sans        Narrow',Arial,sans-serif
}

.bold {
  font-weight:700
}

.indsub {
  color:#e62529;
  font-size:30px;
  font-weight:700

}

从上面的代码中，我想知道如何将媒体查询应用于 Cheapest 和 checkout-price 类？

我尝试应用简单的媒体查询，但它似乎不起作用我无法找出哪里出错了。

Answer 1

问题是您一开始就在编写媒体查询。这意味着首先它会检查媒体查询，然后它会被你的类的实际声明覆盖。有两种方法可以阻止它。

1. Move the media queries to the bottom.
2. Add 'important' keyword in your media queries if you don't want to move bottom.

FIDDE DEMO(I have just moved the media queries to bottom)