当 div 具有样式时，如何使包含 <div> 的 <tr><td> 不使用空格：隐藏 [关闭]答案

【问题标题】：How do I make <tr><td> containing <div> use no space when div has style:hidden [closed]当 div 具有样式时，如何使包含 <div> 的 <tr><td> 不使用空格：隐藏 [关闭]
【发布时间】：2015-05-28 04:04:13
【问题描述】：

在 html 中，我使用 <table><tr><td> 来显示多行，每一行代表一个专辑，然后在每一行之间是另一个 <tr> 行，其中包含一个 <td>，而该行又包含一个 <div>风格：无。此行包含上行中专辑的曲目列表，可以通过单击专辑行上的按钮来切换显示或不显示。

问题是即使隐藏 div 也会占用垂直高度，我认为这是<tr><td> 的高度，但我该如何解决这个问题。或者另一种想法，我可以将<tr> 隐藏，还是我只能对 div 这样做。

（请注意，代码显示这也包含在 Accordion div 中，但这与问题无关）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/style/songkong.css">
<script type="text/javascript" src="/style/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/style/jquery/ui/js/jquery-ui-1.9.2.custom.js"></script>
<link rel="stylesheet" href="/style/jquery/ui/css/smoothness/jquery-ui-1.9.2.custom.css" />
<style>
table {
width:100%;
}
th, td {padding: 5px;text-align: left;}
</style>
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<script>
    $(function () {
    $("#accordion0").accordion({
        active: false, 
        collapsible: true,
        heightStyle: "content"
    });
});</script>
<script>
    $(function () {
    $("#accordion1").accordion({
        active: false, 
        collapsible: true,
        heightStyle: "content"
    });
});</script>
<script>
    $(function () {
    $("#accordion2").accordion({
        active: false, 
        collapsible: true,
        heightStyle: "content"
    });
});</script>
</head>
<body>
<p>Lists all releases by  <b>Farming Incident</b> (<a href="http://musicbrainz.org/artist/4302e264-1cf0-4d1f-aca7-2a6f89e34b36">4302e264-1cf0-4d1f-aca7-2a6f89e34b36</a>) where they are credited as the album artist.</p>
<!-- ReleaseGroupType:Album-->
<h3>Album</h3>
<div id="accordion1">
<!-- ReleaseGroupHeader:Our Glorious 5 Year Plan-->
<table><tr>
<td width="60">2005</td>
<td width="400"><a href="http://musicbrainz.org/release-group/30562779-7740-3b74-8a72-d3ba6cf8e80d"target="_blank"title="View MusicBrainz Release Group">Our Glorious 5 Year Plan</a>
</td>
<td>1&nbsp;<img src="/images/mb_32.png"/></td>
<td>linked to 0&nbsp;<img src="/images/discogs_32.png"/></td>
<td>found possible links for 0&nbsp;<img src="/images/discogs_32.png"/></td>
<td>Additional 0&nbsp;<img src="/images/discogs_32.png"/>
</td></tr></table>
<!-- ReleaseGroup:Our Glorious 5 Year Plan-->
<div>
<p>
<!-- ReleaseGroupTableHeader:Our Glorious 5 Year Plan-->
<table><tr><td><a href="http://musicbrainz.org/release-group/30562779-7740-3b74-8a72-d3ba6cf8e80d"title="Open album in MusicBrainz"target="_blank"><img src="../../images/mb_32.png"/></a>
</td></tr></table>
<table><tr><td colspan="12"><b>MusicBrainz Releases where no link to Discogs have been found</b></td></tr>
<tr><th width="60">Actions</th>
<th width="60">Year</th>
<th width="200">Title</th>
<th width="50">Country</th>
<th width="100">Format</th>
<th width="120">Label</th>
<th width="100">Cat no</th>
<th width="200"></th>
<th width="50"></th>
<th width="100"></th>
<th width="120"></th>
<th width="100"></th>
</tr>
<!-- Release Header:1d9e8ed6-3893-4d3b-aa7d-6cd79609e386-->
<tr><td width="100"><input type="button" onclick="return toggleMe('1')" value="Tracks"></td>
<td width="20"><img src="/images/mb_32.png"/></td>
<td width="60">2005</td>
<td width="200"><a href="http://musicbrainz.org/release/1d9e8ed6-3893-4d3b-aa7d-6cd79609e386"target="_blank"title="View MusicBrainz release">Our Glorious 5 Year Plan</a>
</td>
<td width="50"><img src="/images/flags/flags-iso/shiny/32/GB.png"/></td>
<td width="100">CD</td>
<td width="120">Wrath Records</td>
<td>WRATHCD25</td></tr>

<!-- Release:1d9e8ed6-3893-4d3b-aa7d-6cd79609e386-->
<tr><td colspan="11"><div id="1" style="display:none"><p>CD</p>
<table>
<tr><th>#</th><th>Title</th><th>Duration</th></tr>
<tr><td>1</td><td>Complicity</td><td>3:21</td></tr>
<tr><td>2</td><td>When Your Political Ideology Has Gone Out of Fashion...</td><td>1:43</td></tr>
<tr><td>3</td><td>Hyde Park</td><td>4:09</td></tr>
<tr><td>4</td><td>The Harder You Fall, the Better Life Gets</td><td>2:49</td></tr>
<tr><td>5</td><td>The Equaliser</td><td>5:37</td></tr>
<tr><td>6</td><td>Gravitational Lenz</td><td>3:54</td></tr>
<tr><td>7</td><td>Mars Tranquilum</td><td>6:32</td></tr>
<tr><td>8</td><td>Sputnik 8 Ace</td><td>4:52</td></tr>
<tr><td>9</td><td>The Flute of Shame</td><td>2:15</td></tr>
<tr><td>10</td><td>Rostov</td><td>7:00</td></tr>
</table>
</div></td>
</tr>
</table>
</div>
</body></html>

【问题讨论】：

你能发布你有什么吗？
也许你应该使用 display:none 而不是 visibility:hidden。可见性占据垂直高度，而显示则不会。
display:none 会让隐藏元素不占空间
什么是style:hidden？请在问题中添加相关代码。
你用什么来隐藏 div？如果你使用visibility: hidden，它仍然会占用空间。如果你使用display: none，那么它不会占用空间。

标签： javascript html css

【解决方案1】：

没有 HTML，我们无法为您提供帮助。

但是，您确实可以像任何其他元素一样在 <tr> 元素上应用 display: none 来隐藏它。

【讨论】：

好的，我已经完成了（抱歉，我发现很难提取相关部分），如您所见，我使用 display:none 并且有效，但如果我有多个专辑，因此有多个行这些行之间的垂直间隙，我看不到如果我删除包含隐藏 div 的行