如何隐藏和显示表格行（css-tables）答案

【问题标题】：How to hide and show a table-row (css-tables)如何隐藏和显示表格行（css-tables）
【发布时间】：2014-09-13 21:46:34
【问题描述】：

我正在尝试使用 css-tables 和纯 JavaScript（无 jQuery）隐藏和显示表格行。

我有一个div，其中display 设置为table-row，其中一个nav。不管我做什么，border-collapse 等等，div 仍然保持了它的一些高度。

有什么想法吗？

HTML：

  <!-- Header -->
  <header id='header'> <!-- Table Row 1 -->
    <div id="header-table">
      <div id='back'>
        <button id='back-button'>&#8592;</button>
      </div>
      <div id="title">
        <h1 id='title-h1'>Title</h1>
      </div>
      <div id="menu">
        <button id='menu-button'>&equiv;</button>
      </div>
    </div>
  </header>

    <nav id="menu-nav">
      <a href="#intro">Introductory Page</a>
      <a href="#list">Activity List</a>
      <a href="#settings">Settings</a>
      <a href="#about">About</a>
    </nav>

  <div id="body"> <!-- Table Row 3 -->

    <div id="wrapper">

CSS

header#header {
  position: relative;
  display: table-row;
}

div#menu-nav-cell {
  position: relative;
  display: table-row;
  text-align: center;
  overflow: hidden;
  background: yellow;
}

nav#menu-nav {
  display: table-row;
  height: 0em;
  width: 100%;
  color: #000;
  background: pink;
}


div#body {
  position: relative;
  display: table-row;
  height: 100%;
}

div#wrapper {
  position: relative;
  height: 100%;
}

【问题讨论】：

你能给我们举个例子吗？

标签： html css

【解决方案1】：

为什么不直接使用display: none？

也许我误会了，因为你说你有一个 div，里面有一个 nav，但我在你的 html 示例中看不到。

我认为您想显示/隐藏导航。这可以通过添加这个 css 规则来完成：

nav#menu-nav.hidden {
    display: none;
}

和javascript

document.getElementById("toggle").onclick = function () {
    document.getElementById("menu-nav").classList.toggle("hidden");
}

jsFiddle

如果你想为高度设置动画，你可以这样做：

/* new rules that I added */
nav#menu-nav {
  line-height: 1em;
  -webkit-transition: line-height .2s, background-color .2s;
}

nav#menu-nav a {
    display: inline-block;
    overflow: hidden;
    height: 1em;
    -webkit-transition: height .2s;
}

nav#menu-nav.hidden {
    line-height: 0em;
    background-color: transparent;
}
nav#menu-nav.hidden a {
    height: 0;
}

诀窍是对表格单元格使用overflow: hidden; display:inline-block，而不是display:table-cell。这样，将高度和行高更改为零就可以正常工作。

但是仍然有一些高度（大约 3 像素）仍然可见，所以我决定将背景颜色也设置为透明。如果您评论使背景颜色具有动画效果的部分，您就会明白我的意思。

jsFiddle v2

【讨论】：

display none 有效，但不能用 css 过渡动画。