The task before me was to hide the first 3 columns in the table, hid it in the end. But the display in Chrome is strange, as soon as I open a page with a table for about 1 second, the first 3 columns appear that I have hidden, and as soon as 1 second passes the columns disappear. I tried to open it in Mozilla, it works perfectly there, that is, opened the table of the first 3 columns is not visible. I meet with this for the first time, how can I solve the problem?

$(document).ready(function(){ $('#table td:nth-child(1)').css("display", "none"); $('#table td:nth-child(2)').css("display", "none"); ('#$table td:nth-child(3)').css("display", "none"); });
  • It's quite normal. First, the page code is loaded, and then the block hiding script itself is executed. Why don't you hide them in html ? ( style="display:block" ) - Yuri
  • the table is displayed in my cycle) - Eliot

2 answers 2

Method number 1:

 #table td:nth-child(1), #table td:nth-child(2), #table td:nth-child(3) {display:none;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <tbody> <tr><td>1</td><td>2</td><td>3</td></tr> </tbody> </table>

Method number 2:

 $(function() { $('#table td:nth-child(1)').css("display", "none"); $('#table td:nth-child(2)').css("display", "none"); $('#table td:nth-child(3)').css("display", "none"); $('body').css("display", "block"); }); 
 body {display:none;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <tbody> <tr><td>1</td><td>2</td><td>3</td></tr> </tbody> </table>

  • 2 Method, perfectly solved my problem. Thank. - Eliot

So while $(document).ready didn't work (i.e., all the content and script files and styles were not loaded), its function does not hide these columns. Transfer display: none to css and it will work faster and there will be no blinking.