CSS Media queries adjust to screen width in asp.net

I have two html tables in my Asp.net project, first one has normal html and 2nd one has a Repeater control. Due to some recent changes, it was difficult to align the width of the two tables. Also, I was facing issue on 2 different resolutions as below:

  1. 1920×1080 on my laptop.
  2. 1366×768 on my Desktop.

To solve this, I used the css media queries to cater to minimum width resolution of 1400px for MyTable and for above 1400px width resolution for OthersTable as shown below:

@media only screen and (max-width: 1400px) {
    .MyTable {
        width: 92%;
    }

    .OthersTable {
        width: 90%;
    }
}

@media only screen and (min-width: 1400px) {
    .MyTable {
        width: 90%;
    }

    .OthersTable {
        width: 90%;
    }
}

Media queries introduced in CSS3 let you include some properties only if certain condition is met. In the above case, I’m using screen-width as the condition. Below I’m using the class in my html tables as defined in the media queries in the aspx code.

<table id="divMyTable" visible="false" style="border-collapse: collapse;" class="MyTable" runat="server">
	<tr><td></td></tr>
</table/>			

<table id="divOthersTable" visible="false" style="border-collapse: collapse;" class="OthersTable" runat="server">
	<tr>
		<td></td>
	</tr>
</table>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.