有没有办法创建 "inline-none" CSS 效果？将被隐藏，但保留它在页面上占用的 space

Question

我希望能够隐藏一些按钮（在 3 列 table 显示的右列中）。我想

  <tr id="a_row_<?php echo $a_id ?>">
    <td id="linked_general_name_<?php echo $a_id ?>"><a target="_blank" href="index.php?general_assessments&stats=<?php echo $a_id ?>"><?php echo $label ?></a></td>
    <td><a href="index.php?viewcompany&id=<?php echo $c_id ?>" target="_blank"><?php echo $c_name ?></a></td>
    <td class="text-right" style="vertical-align:middle;">
      <a templateID="<?php echo $a_id ?>" href="#" class="label label-success"><i class="fa fa-cogs" style="padding-right:5px;"></i>Create Template</a>
    </td>
  </tr>

好吧，我正在做的是使用 jQuery 来隐藏 templateID 属性项。我也使用它，以便我基本上可以从 link 中获取 ID 并使用它来填充模式（别担心，这是针对单个用户管理面板的）。

这是 jQuery...

$("#something").on("click", function(e){
 e.preventDefault(); // works as intended
 var aID = $(this).attr("templateID"); // works as intended
 $("[templateID]").css("display", "none"); // this works ~ hides all buttons
 // more stuff below... 
});

$("#somethingElse").on("click", function(e){
 e.preventDefault(); // works as intended
 $("[templateID]").css("display", "block"); // this works ~ shows all buttons
});

问题？当我隐藏按钮时，它会使其他 2 列向右移动，因为第 3 列不再占用那么多 space。我希望能够产生与内联块或 table-row 相同的结果，因为当您使用整个 TR 并想要显示某些内容时，但带有 table CELL / 内部内容隐藏它的单元格。有没有什么inner-none，或者table-row-none之类的？我找不到任何有用的东西。我不想删除该列。按钮被隐藏的唯一原因是它所在的容器 (table) 在单击按钮时淡出，我隐藏了按钮，因此无法快速双击 - 如果按钮保持可见，我发现你可以非常快速地点击（这很难，但会导致错误）并且由于使用了 fadeToggle() 而弄乱了淡入淡出动画。

无论如何，如果有人知道我如何隐藏 table 单元格内容（对于整列）而不移动 table 的其余部分（对第 3 列中的任何内容都没有响应），那将太棒了。谢谢 :)

Answer 1

要在隐藏元素的同时保留 space，您可以使用 visibility: hidden 或 opacity:0 并使其再次可见 visibility:visible 或 opacity:1

 $("#something").on("click", function(e){
     e.preventDefault(); // works as intended
     var aID = $(this).attr("templateID"); // works as intended
     $("[templateID]").css("visibility", "hidden"); // this works ~ hides all buttons
     // more stuff below... 
    });

$("#somethingElse").on("click", function(e){
 e.preventDefault(); // works as intended
 $("[templateID]").css("visibility", "visible"); // this works ~ shows all buttons
});

有没有办法创建 "inline-none" CSS 效果？将被隐藏，但保留它在页面上占用的 space

Is there a way to create an "inline-none" CSS effect? Will be hidden, but preserve the space it takes up on page

html

javascript

css

jquery

hide