隐藏整个表格调整它的大小答案

【问题标题】：Hiding entire table resizes it隐藏整个表格调整它的大小
【发布时间】：2017-04-27 14:55:25
【问题描述】：

拥有一个带有简单表格和 js 代码的 HTML 页面来显示/隐藏：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title</title>
    <script type="text/javascript">


    function showErrorSteps()
    {        
        var el = document.getElementById("t1");

        if(el.style.display=="none")
        {
            el.style.display="block";
        }
        else
        {
        el.style.display="none";
        }                                               
    }

    </script>
</head>
<body>

<br />
<span onclick="showErrorSteps()">[click]</span>
<br />
<br />

<table id="t1" border="1" width="100%" style="table-layout: fixed">
<tr>
    <td>s</td>
    <td>d</td>
    <td>a</td>
</tr>
</table>        
</body>
</html>

发生的情况是，在 Mozilla 上单击两次后表格会调整大小（即使使用表格布局：固定 css）。 IE 运行良好。

【问题讨论】：

这个页面有DOCTYPE吗？如果不是，为什么要使用 xhtml 命名空间？
table-layout: fixed 是 IE 的东西，不是标准的
@RoBorg - 我对 IE 非标准实现非常满意；不过我仍然使用 Mozilla :) @Anthony ... 好点

标签： javascript html firefox

【解决方案1】：

不应将表格设置为display: block。表格行和单元格也不应该。它们具有不同的显示值。我的建议？不要这样做。使用类：

.hidden {
  display: none;
}

并从表格中动态添加和删除，以避免在您显示的元素上设置正确的显示类型。

编辑：澄清评论为什么要这样做以及发生了什么。试试这个：

<table>
<tr>
  <td>Cell 1</td>
  <td style="display: block;">Cell 2</td>
</tr>
</table

它会（或应该）搞砸您的表格布局。为什么因为 <td> 元素默认情况下具有 display: table-cell 而不是 block。表是一样的。他们有display: table。

取消设置 CSS 属性是……有问题的。

因此，您最好使用类来设置和取消设置属性。它更容易更改（类驻留在 CSS 文件中，而不是代码），避免了将值设置回正确的原始值等问题，并且通常提供更简洁的解决方案，尤其是在与 jQuery 等库一起使用时。在 jQuery 中，你可以这样做：

$("table").toggleClass("hidden");

完成。

或者，如果更合适，您可以使用addClass() 和removeClass()。例如：

<input type="button" id="hide" value="Hide Table">
...
<table id="mytable">
...

和

$(function() {
  $("#hide").click(function() {
    if ($("#mytable").is(".hidden")) {
      $("#hide").val("Hide Table");
      $("#mytable").removeClass("hidden");
    } else {
      $("#hide").val("Show Table");
      $("#mytable").addClass("hidden");
    }
  });
});

你有一个健壮、简洁和易于理解的解决方案（一旦你了解了 jQuery 语法，这不会花费那么长时间）。

在 2002 年直接使用 Javascript。:-)

【讨论】：

这行得通，尽管我必须承认我不明白它为什么行得通。
@cletus：表的默认显示值是什么，而不是块。
简单。因为拥有它所显示的类将是 none 并且没有它所显示的类将按照元素默认值。没有坚持。我一直告诉人们类操作比样式操作更好，但他们会听吗;)

【解决方案2】：

这不是对您问题的直接回答，而是一个严肃的建议。我最近发现了JQuery 的乐趣。所有这些事情都可以毫不费力地完成，并且有大量的在线示例和参考资料可供使用。

如果您现在没有时间深入研究，那么我相信有人会在这里提供解决方案，但我建议任何除了最粗略的 JavaScript DOM 操作之外做任何事情的人考虑 JQuery（或类似的框架)。

JQuery 提供独立于浏览器的 Hide()、Show() 和 Toggle() 方法。这是我最喜欢的references之一。

【讨论】：

谢谢，我会调查的。我实际上在一个 .net win forms 项目中工作，所以我并没有真正与 html 交互，除非我想做一些花哨的报告。

【解决方案3】：

这可能是因为您将 style.display 设置为“block”。尝试将其设置为“”。您还应该使用 CSS 设置表格宽度。（宽度：100%；）

【讨论】：