How to make responsive table [closed]

by

Basically

A responsive table is simply a 100% width table.

You can just set up your table with this CSS:

.table {
  width: 100%;
}
<table class="table" border="1">
    <thead>
      <tr>
        <th colspan="2">Table head</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
    </tbody>
  </table>

You can use media queries to show/hide/manipulate columns according to the screens dimensions by adding a class (or targeting using nth-child, etc):

/* When the screen size is bigger than 320px hide the element */
@media screen and (max-width: 320px) {
    .hide { display: none; }
}

HTML

<td class="hide">Not important</td>

More advanced solutions

If you have a table with a lot of data and you would like to make it readable on small screen devices there are many other solutions:

More Related Contents:

  1. What are the steps to make a HTML design responsive? [closed]
  2. Why does the order of media queries matter in CSS?
  3. IE8 support for CSS Media Query
  4. Common breakpoints for media queries on a responsive site
  5. Should I use max-device-width or max-width?
  6. Common CSS Media Queries Break Points [duplicate]
  7. What are the rules for CSS media query overlap?
  8. Media Queries for Different zoom Levels of Browser
  9. CSS media queries – Order matters?
  10. How to make a element expand or contract to its parent container?
  11. Responsive css styles on mobile devices ONLY
  12. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  13. Which are the most important media queries to use in creating mobile responsive design?
  14. how to make responsive website for all devices [closed]
  15. Set div height equal to screen size
  16. How to code CSS media queries targeting ALL mobile devices and tablets?
  17. How can I avoid media query overlap?
  18. Bootstrap – Removing padding or margin when screen size is smaller
  19. Single vs multiple stylesheets in responsive web design
  20. Media Queries – Mobile vs Desktop Browser
  21. How would I achieve a shadow that won’t show through transparent text?
  22. Does “display:none” prevent an image from loading?
  23. CSS @media print issues with background-color;
  24. HTML 5 strange img always adds 3px margin at bottom [duplicate]
  25. css grid of squares with flexbox
  26. What is the current state of the “scoped” attribute for the style element in HTML5?
  27. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  28. What is the best way to move an element that’s on the top to the bottom in Responsive design
  29. Align text to the bottom of a div
  30. Full background image with fade effect

Leave a Comment