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

【问题标题】：How to give particular height to border of table tr td in responsive dimensions 320X480如何在响应尺寸 320X480 中为表格 tr td 的边框赋予特定高度
【发布时间】：2014-08-20 19:16:29
【问题描述】：

我的表结构是这样的：

<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>

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

我之前给出的边界是两三行，而不是超过 td。

【问题讨论】：

什么..什么？我完全不明白...
我的表中有 3 列和行数。但是我在桌面视图中给出的边框在 320X480 响应式视图中不合适。
一开始您是如何分配边框的？当它没有正确显示？尝试使用 css：table tr td {border-bottom: 2px solid #000;}
您可能想使用media queries 以便通过您的 CSS 类使内容适应屏幕分辨率？
媒体查询不是我知道的问题，而是如何为表格提供适当的边框。我想知道 CSS。

标签： css responsive-design html-table

【解决方案1】：

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

“正确的级联媒体查询？/屏幕调整大小/刷新时的奇怪媒体查询行为”

@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

我想这一定是最合适和正确的概念答案。

【讨论】：