Click here to Skip to main content
15,867,141 members
Articles / Web Development / CSS3
Tip/Trick

Responsive HTML Table with CSS Media Queries

Rate me:
Please Sign up or sign in to vote.
4.00/5 (12 votes)
6 Dec 2015CPOL2 min read 39.4K   255   12   7
Creating HTML Responsive Table with help CSS media queries

Introduction

In the modern Web Development world, it is very important to provide program solutions that support Responsive Web Design. What is this Responsive Web Design? This is a web site design when your web page should look good on different devices with different solutions. The web site must look good on the desktop computer, laptop, tablet and phone.

One of the techniques to perform the task is to use CSS3 media queries.

Background

The example is an ASP.NET Web Application written in Visual Studio 2013.

Media Queries is a CSS3 module allowing HTML rendering which works in all screen resolution (for example, on smartphone screen and on computer screen). It is a cornerstone technology of Responsive web design.

My aim in this project is to support different screens resolutions for my small site: 1024px, 768px, 480px. For example, 1024px resolution for the desktop computer, 768px for iPad and 480px for the smartphone.

Using the Code

In the solution, I used ASP.NET Web Application with MVC template.

Let us start by creating a simple HTML table in the Index.cshtml, the first page loaded from the site's solution.

HTML
<table border="1">
    <tr>
        <th class="un_first">
            First Name
        </th>
        <th>
            Last Name
        </th>
        <th>
            Company
        </th>
        <th class="un_age">
            Age
        </th>
        <th class="un_address">
            Address
        </th>
    </tr>
    <tr>
        <td class="un_first">
            Bill
        </td>
        <td class="un">
            Gates
        </td>
        <td class="un">
            Microsoft
        </td>
        <td class="un_age">
            60
        </td>
        <td class="un_address">
            Washington, United States
        </td>
</tr>
    <tr>
        <td class="un_first">
            Steve
        </td>
        <td>
            Jobs
        </td>
        <td>
            Apple
        </td>
        <td class="un_age">
            56
        </td>
        <td class="un_address">
            2101 Waverley Street, Palo Alto
        </td>
    </tr>
    <tr>     
        <td class="un_first">
            Mark
        </td>
        <td>
            Zuckerberg
        </td>
        <td>
            Facebook
        </td>
        <td class="un_age">
            31
        </td>
        <td class="un_address">
            1 Hacker Way, Menlo Park, CA 94025, US
        </td>
    </tr>
</table>

After that, it is needed to create .css file with media queries definitions:

CSS
@media (max-width:1024px) {
	.un_address{
		display:none;
	}
}

@media (max-width:768px) {
	.un_age{
		display:none;
	}
}

@media (max-width:500px) {
	.un_first{
		display:none;
	}
}

The explanation of the CSS file is as follows:

  • first @media rule: if the browser window is smaller than 1024px, the .un_address css class will be applied.
  • second @media rule: if the browser window is smaller than 768px, the .un_age css class will be applied.
  • third @media rule: if the browser window is smaller than 500px, the .un_first css class will be applied.

The display: none definition in the CSS means that the HTML element will be hidden.

I defined the first column in the HTML table with CSS class un_first:

HTML
<td class="un_first">

The age HTML table column with CSS class un_age:

HTML
<td class="un_age">

The address column with CSS class un_address:

HTML
<td class="un_address">

Thus, if the screens resolution will be 1024px or more pixels, the user will see all the columns of the table.

Image 1

If the screens resolution will be smaller than 1024px, the address column will be hidden.

Image 2

If the screen's resolution will be smaller than 768px, the age column will be hidden.

Image 3

If the screen will be smaller than 500px, the First Name column will be hidden.

Image 4

Points of Interest

.NET, .NET Infrastructure, ASP.NET MVC, WEB, HTML/CSS, JavaScript, jquery, Angular, Database, PL-SQL.

History

  • 3rd December, 2015: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Israel Israel
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questioni see u have a lot of free time Pin
galba201821-Mar-16 2:10
galba201821-Mar-16 2:10 
GeneralMy vote of 2 Pin
Donsw4-Dec-15 14:39
Donsw4-Dec-15 14:39 
QuestionResponsive? Pin
Dewey3-Dec-15 22:15
Dewey3-Dec-15 22:15 
AnswerRe: Responsive? Pin
Camilo Reyes4-Dec-15 14:31
professionalCamilo Reyes4-Dec-15 14:31 
Well, no. Responsive fits any device and adapts to many experiences. It is okay to hide things as long as it makes sense for that specific experience. Bootstrap is an abomination, btw. Poke tongue | ;-P

GeneralRe: Responsive? Pin
Member 111427157-Dec-15 0:18
Member 111427157-Dec-15 0:18 
GeneralRe: Responsive? Pin
AlexandraGren7-Dec-15 2:51
AlexandraGren7-Dec-15 2:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.