Question

我的表结构是这样的：

<div class="services1">
  <h1 class="head-long1">Virtual Assistant Services</h1>
  <table class="tab1" style="width:auto;" border="0" cellpadding="0">
    <tbody>
      <tr>
        <td style="text-align: left;" width="302" class="td_ser"><div class="bor_ser">
            <div class="moduletable_latest-news_abc1" style="text-align: left;">
              <div class="head1">IT Outsourcing</div>
              <div class="list1">
                <ul class="latestnews_latest-news1">
                  <li style="text-align: left;">Web Programming</li>
                  <li style="text-align: left;">Software Development</li>
                  <li style="text-align: left;">Software Testing</li>
                  <li style="text-align: left;">CMS (Wordpress) Development</li>
                  <li style="text-align: left;">Ecommerce Development</li>
                </ul>
              </div>
            </div>
            <div class="img1"> 
            <span><a href="/request-for-proposal.html" target="_new">
            <img class="img_btm" alt="" src="" width="150" height="35"/></a>
            </span></div>
          </div></td>
        <td style="text-align: left;" width="302" class="td_ser"><div class="bor_ser">
            <div class="moduletable_latest-news_abc1" style="text-align: left;">
              <div class="head1">Content Writing</div>
              <div class="list1">
                <ul class="latestnews_latest-news1">
                  <li style="text-align: left;">Article Writing</li>
                  <li style="text-align: left;">Blog Writing</li>
                  <li style="text-align: left;">SEO Writing</li>
                  <li style="text-align: left;">Report Writing</li>
                  <li style="text-align: left;">PR Writing</li>
                </ul>
              </div>
            </div>
            <div class="img1"> <span><a href="/request-for-proposal.html" target="_new">
            <img class="img_btm" alt="" src="" width="150" height="35"/></a>
            </span> </div>
          </div></td>
        <td style="text-align: left;" width="302" valign="top" class="td_ser"><div class="bor_ser">
            <div class="moduletable_latest-news_abc1" style="text-align: left;">
              <div class="head1">Business Transcription</div>
              <div class="list1">
                <ul class="latestnews_latest-news1" style="text-align: left;">
                  <li style="text-align: left;">General Transcription</li>
                  <li style="text-align: left;">Legal Transcription</li>
                  <li style="text-align: left;">Medical Transcription</li>
                  <li style="text-align: left;">Financial Transcription</li>
                  <li style="text-align: left;">Interview Transcription</li>
                </ul>
              </div>
            </div>
            <div class="img1"> <span><a href="/request-for-proposal.html" target="_new">
            <img class="img_btm" alt="" src="" width="150" height="35"/></a>
            </span> </div>
          </div></td>
      </tr>
    </tbody>
  </table>
</div>

您能否建议我如何为上述代码提供响应式表格边框，以使边框的高度和宽度分别为320X480分辨率？

我给的早期边界是两条三条线而不是td。

Answer 1

我从 myol 即

提出的另一个问题陈述中得到了答案

<强>＆＃34;适当的级联媒体查询？ /屏幕上的奇数媒体查询行为调整大小/刷新＆＃34;

@mixin responsive($device)

@if $device == small-mobile
  @media only screen and (max-width: 576px)
    @content

@if $device == mobile
  @media only screen and (max-width : 767px)
    @content

@if $device == tab-portrait-device
  @media only screen and (min-device-width : 768px) and (max-device-width : 959px)
    @content

@if $device == tab-portrait
  @media only screen and (min-width : 768px) and (max-width : 959px)
    @content

@if $device == tab-landscape-device
  @media only screen and (min-device-width : 960px) and (max-device-width: 1239px)
    @content

@if $device == tab-landscape
  @media only screen and (min-width : 960px) and (max-width: 1239px)
    @content

@if $device == desktop
  @media only screen and (min-width : 1240px) and (max-width: 1680px)
    @content

@if $device == big-desktop
  @media only screen and (min-width : 1681px)
    @content

我想这应该是最合适且最正确的概念性答案。

如何在响应尺寸320X480中为表格trdd的边框赋予特定高度

1 个答案: