如何默认隐藏display属性为table-cell的div元素

display 是单值CSS属性，不能同时设置table-cell和none两个属性值，同一时间只能生效其中一个。
你之前遇到的show()执行后丢失table-cell特性的问题，是因为jQuery默认的show()方法会把元素的display重置为对应标签的默认值（div标签默认是block），因此覆盖了你之前设置的table-cell。

• 方案1：用CSS类控制显隐（最推荐，完全保留原有样式）
  先定义隐藏专用的CSS类：

  .hidden {
    display: none !important;
  }
  

  初始状态给div加上该类：

  <div style="display: table-cell;" class="hidden">你的内容</div>
  

  需要显示时移除类即可，不要调用show()：

  $('你的div选择器').removeClass('hidden');
  

• 方案2：手动控制display属性值
  不需要额外定义CSS，初始直接设置display: none，需要显示时手动指定display为table-cell即可：

  // 显示
  $('你的div选择器').css('display', 'table-cell');
  // 隐藏
  $('你的div选择器').css('display', 'none');
  

• 方案3：使用不修改display的隐藏方式（适合接受隐藏时保留元素占位的场景）
  初始用visibility: hidden实现隐藏，不会改动display属性：

  <div style="display: table-cell; visibility: hidden;">你的内容</div>
  

  需要显示时修改visibility属性即可：

  $('你的div选择器').css('visibility', 'visible');
  

内容的提问来源于stack exchange，提问作者János