Member Avatar for safeer008

Can anybody tell me that how we can handle the tables in a responsive website design. If you try to decrease the font size it will be harder for the mobile users. If you don't decrease the font size then the data will be mixed and so on. Give me CSS code.

  • 3 Contributors
  • 6 Replies
  • 1K Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by mattster

Dani AI

Generated

Quick summary tied to the thread: responsive tables usually pick one of three practical strategies — preserve the grid (allow horizontal scrolling), hide/priority columns with toggles/filters, or convert each row into a stacked key:value card for small viewports. ’s horizontal-scroll idea is a solid fallback and ’s point about relative sizing is useful, but shrinking font to fit generally harms readability. The stacked/card rewrite is the most readable on phones and is a common pattern in practice. (Responsive Data Tables overview).
(Use media queries to switch patterns at the breakpoint where the table becomes unreadable.) (Using media queries — MDN).

A compact, accessible stacked pattern (markup + small CSS change):

<table class="resp">
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Email</th><th scope="col">Phone</th></tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Alice</td>
      <td data-label="Email">alice@example.com</td>
      <td data-label="Phone">555-1234</td>
    </tr>
  </tbody>
</table>

@media (max-width:640px){
  .resp thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .resp, .resp tbody, .resp tr, .resp td { display:block; width:100%; }
  .resp td { padding-left:50%; position:relative; }
  .resp td::before { content:attr(data-label); position:absolute; left:0; width:45%; padding-left:.5rem; font-weight:600; }
}

Accessibility & practical tips: keep real <th> headers (use scope or headers so assistive tech can map cells). Hide headers visually with a “visually-hidden”/sr-only technique instead of display:none so screen readers still see them. Prefer relative font units (rem/em) so users who increase text size keep readability. For very wide datasets, combine column-priority hiding, column toggles, or a “view full table” page. (Table accessibility — MDN) (Visually hidden / sr-only — WebAIM) (font-size guidance — MDN).

Recommended Answers

All 6 Replies

Member Avatar for David_50

Design a generic table so users can hide and rearrange columns, which sorts left to right, reverse on second click of any column. Design it to have filters so the row count under view can be reduced. Design it to freeze panes so they can still access col/row headers when down table or right. Design it to go full screen with hidden controls. us a decent sized font. Verdana was the winner in an IEEE published productivity test, is more readable at smaller sizes. Mobile users can shrink and expand screens up to some limit, so make sure that works right, not too limited.

Member Avatar for safeer008

Can you give me any code example?

Member Avatar for mattster

You can look at this article for some ideas:

You can use CSS3 'breakpoints' to do display:none; on mobiles for certain screen sizes. Additionally, you can have a wrapper div and set overflow:scroll, like this:

// HTML
<div class="table-wrapper">
    <table>
    ...
    </table>
</div>

// CSS
.table-wrapper {
    min-height: .01%;
    overflow-x: auto;
}
@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
}

Here's a jsFiddle. (Code taken from the Bootstrap Project)

There's lots of things you can do, but personally I find this the most multipurpose and easy to use.

Member Avatar for safeer008

Wow Thanks mattster. It really is helpful.

Member Avatar for David_50

I rather prefer dimensions in % than pixels, so they scale automatically.

Member Avatar for mattster

You mean in the breakpoints? Because that is impossible, you have to define an exact size.

Percentages are okay, as long as they are controlled. Percent widths soon get very difficult when it comes to different devices/screen sizes. Personally, I find it easier to use fixed widths, then I can be sure how it will look on the majority of pages.

To manage percent widths properly, you will need alot more breakpoints to handle different sizes = effort.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.