• Translate

8/17/2017

Tutorial Hiding Table Columns with Responsive CSS

Tutorial Web Design |

Advertisement

Tutorial Hiding Table Columns with Responsive CSS
The need for a website that can be opened with a good view on any device that has a different screen size is becoming more and more. This is certainly because mobile device users increasingly growing.

One element on the website that is quite difficult to make responsive is the table. Because it has a fairly complicated structure compared to other tags such as div or span.

On this occasion alltutorials.info will demonstrate how to create responsive tables with columns that are automatically hidden when the screen size shrinks, and appears if the screen is larger.

► Only with HTML and CSS
To create such a feature we only need HTML and CSS so that a column we can hide without having to use third party component dependencies such as jQuery or Datatables.

We use the Class CSS selector to specify the priority of the column as priority-1, priority-2. Style added to this Class selector based on media screen size using CSS Media Query. So when the screen gets smaller then the display style will be applied to the table column based on the window size limit specified in the media query.

► Priority Class Columns in HTML Responsive Table
This HTML code is used to display responsive tables using Class selectors. We specify the priority of HTML table columns to control the display by priority.

Also read: Tutorial Create HTML Live Editor With GitHub Hosting

If the window size is smaller, the column view will be hidden using priority in the Class selector.
<!DOCTYPE html>
   
    <title>JS FIDDLE</title>
   <body>
    <div class="container">
      <h1>Responsive Table Column</h1>
      <p>Read the tutorial on <a href="http://www.alltutorials.info/2017/08/tutorial-hiding-table-columns-with-responsive-CSS.html">Alltutorials.info</a></p>
      <table id="contact-detail" class="jw-table" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th class="priority-1" width="15%">First Name</th>
            <th class="priority-2" width="15%">Last Name</th>
            <th class="priority-3" width="15%">Address</th>
            <th class="priority-4" width="10%">Phone</th>
            <th class="priority-5" width="15%">DOB</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td class="priority-1">Teuku</td>
            <td class="priority-2">Maulana</td>
            <td class="priority-3">Lhokseumawe</td>
            <td class="priority-4">628136088xxxx</td>
            <td class="priority-5">02-12-1985</td>
          </tr>
          <tr>
            <td class="priority-1">Bustami</td>
            <td class="priority-2">ST</td>
            <td class="priority-3">Kutablang</td>
            <td class="priority-4">-</td>
            <td class="priority-5">14-04-1977</td>
          </tr>
          <tr>
            <td class="priority-1">Hazairin</td>
            <td class="priority-2">-</td>
            <td class="priority-3">Kr. Mane</td>
            <td class="priority-4">-</td>
            <td class="priority-5">15-11-1987</td>
          </tr>
          </tbody>
      </table>
    </div>
  </body>
► CSS Code To Hide Columns
The following CSS code is used to apply the hiding ability of the columns automatically using CSS media queries. This code contains media requests for four screen sizes by specifying a minimum (min) limit for each.

When the screen size falls within that limit, the display style will be adjusted in the table column.
.jw-table {
  border: #e1e0e0 1px solid;
}

.jw-table th {
  text-align: left;
  background: #f0F0F0;
  padding: 10px;
}

.jw-table td {
  border-bottom: #e1e0e0 1px solid;
  padding: 10px;
}

@media screen and (max-width: 900px) and (min-width: 550px) {
  .priority-5 {
    display: none;
  }
}

@media screen and (max-width: 550px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
}

@media screen and (max-width: 300px) {
  .priority-5 {
    display: none;
  }
  .priority-4 {
    display: none;
  }
  .priority-3 {
    display: none;
  }
  .priority-2 {
    display: none;
  }
}
► Demo & Download Code
If you are interested to try then can download and see the demo below :


Hopefully this simple tutorial that we write this can help you in completing the project website you are working on or a new one will be made later.

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.