How to give particular height to border of table tr td in responsive dimensions 320X480

Question

My table structure is like this:

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

Can you please suggest how can I give responsive table tr td border to the above code so that the border is of particular height and width in 320X480 resolution?

Earlier border that I gave was coming in two three lines and not over the td.

What I have is 3 columns and number of rows in my table. But the border that I gave in Desktop view is not coming proper in 320X480 responsive view. — Kusumakar Pant, Jun 30 '14 at 12:09
How did you assign your border in the first instance? when it didn't display correctly? Try using css: `table tr td {border-bottom: 2px solid #000;}` — SliQz, Jun 30 '14 at 12:24
You may want to use [media queries](http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/#width) in oder to adapt the content to the screen resolution through your CSS classes ? — user3241019, Jun 30 '14 at 13:15
Media query is not a problem I know that but How to give proper border to the Table. I want to know the CSS. — Kusumakar Pant, Jun 30 '14 at 13:21
http://stackoverflow.com/questions/19723617/responsive-tables-the-smart-way/19724087#19724087 — Sudheer, Jul 01 '14 at 07:47

score 0 · Answer 1 · answered May 31 '17 at 18:45

I got my answer from another problem statement asked by myol viz.

" Proper cascading media queries? / Odd media query behaviour on screen resize / refresh "

@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

And I suppose this got to be the utmost suitable and right conceptual answer.

How to give particular height to border of table tr td in responsive dimensions 320X480

1 Answers1