Display:grid is not working in IE11

Question

0.00/5 (No votes)

See more:

I tryna use

display:grid;

in my website and it's running well in Edge and Chrome but not working in IE11. May I know how to fix that? I've tried

display:-ms-grid;

but

-ms-grid-columns

is not working again in IE too. Here is my full code.

<pre>echo "<table align=\"center\" border=\"0\" width=\"95%\" bordercolor=\"#DADADA\" cellpadding=\"3\" cellspacing=\"1\">\n";
echo  "<tr bgcolor=\"#F5F5F5\"><td align=\"left\" colspan=\"5\">\n";
    echo  "<font face=\"arial\" size=\"2\" color=\"#3C5F84\">  Approver  </font>";
    //echo "       ";
	echo "<tr bgcolor=\"#F5F5F5\"><td align=\"left\" colspan=\"5\" style=\"
	display: grid;
	grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content;
	grid-gap: 10px;
	margin-left:100px;
	margin-top:-20px;\">";

    while($row = mysqli_fetch_array($result)){
    	foreach($ary_approver as $k => $v){


    		if($k == $row["approver_name"]){
    			echo "<input type=\"checkbox\" id=\"chkApprover" . $cnt . "\" name=\"chkApprover[]\" value=\"$v\"><font face=\"arial\" size=\"2\" color=\"#3C5F84\">". $k . "</font>";
    			//echo "<br>           ";
    		}
    	}
    	$cnt++;
    }

    echo  "</td></tr>\n";
	echo  "</td></tr>\n";
    echo "<tr bgcolor=\"#F5F5F5\"></tr>\n";
    echo  "</table>\n";

Above codes run really well in Edge and Chrome but teyna make some changes in IE as below.

echo "<table align=\"center\" border=\"0\" width=\"95%\" bordercolor=\"#DADADA\" cellpadding=\"3\" cellspacing=\"1\">\n";
echo  "<tr bgcolor=\"#F5F5F5\"><td align=\"left\" colspan=\"5\">\n";
    echo  "<font face=\"arial\" size=\"2\" color=\"#3C5F84\">  Approver  </font>";
    //echo "       ";
	echo "<tr bgcolor=\"#F5F5F5\"><td align=\"left\" colspan=\"5\" style=\"
	display:-ms-grid;
	display: grid;
	grid-gap:20px;
	-ms-grid-columns: 1fr 1fr;
	margin-left:100px;
	margin-top:-20px;\">";

    while($row = mysqli_fetch_array($result)){
    	foreach($ary_approver as $k => $v){


    		if($k == $row["approver_name"]){
    			echo "<input type=\"checkbox\" id=\"chkApprover" . $cnt . "\" name=\"chkApprover[]\" value=\"$v\"><font face=\"arial\" size=\"2\" color=\"#3C5F84\">". $k . "</font>";
    			//echo "<br>           ";
    		}
    	}
    	$cnt++;
    }

    echo  "</td></tr>\n";
	echo  "</td></tr>\n";
    echo "<tr bgcolor=\"#F5F5F5\"></tr>\n";
    echo  "</table>\n";

What I have tried:

Tried with

display:-ms-grid;
	display: grid;
	grid-gap:20px;
	-ms-grid-columns: 1fr 1fr;

But still not working.

Posted 30-Mar-22 16:20pm

Kaung Khant Naing

Updated 30-Mar-22 22:39pm

Add a Solution

Comments

Patrice T 30-Mar-22 23:17pm

did you tryed to get rid of IE11 ?
IE11 have been dead for a while.

Kaung Khant Naing 30-Mar-22 23:19pm

yes, that's why I made in Edge and Chrome version. But due to some request, I still need to make for IE11 :(.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2022-03-30T22:39:00

IE11 only supports the older "working draft" version of the grid layout spec:
CSS Grid Layout (level 1) | Can I use... Support tables for HTML5, CSS3, etc[^]
Grid Layout - W3C Working Draft 7 April 2011[^]

You may be able to use a tool like Autoprefixer[^] to generate the CSS for IE. However, many features just will not work.

But since IE11 will officially be dead from this June[^], and with even Microsoft telling you that it's "not a browser" since February 2019[^], I think it's fairly safe to abandon support for such an ancient client. Anyone who uses IE should expect sites to not work properly, and should be strongly encouraged to move to a modern browser instead.