CSS表格不会改变高度

Question

我有 #content 部分的正文和 CSS：

section#content {
	background-color: #ffffff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
	color: #444;
	display: table-cell;
	padding: 7px 18px 21px;
	vertical-align: top;
	width: 617px;
	display: table-cell;
	vertical-align: top;
}
section#content .table {
	border-radius: 5px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	background-clip: padding-box;
	border: 1px solid #d5d5d5;
	display: table;
}

section#content table.table {
	border-spacing: 0;
	width: 100%;
}

section#content table.table td {
	background-color: #f4f4f4;
	padding: 7px;
	text-align: left;
	vertical-align: middle;
	word-break: break-word;
	transition-property: background;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

section#content table.table tr:nth-child(even)>td {
	background-color: #ebebeb;
}

section#content table.table th {
	background-color: #ebebeb;
	border-bottom: 1px solid #d0d0d0;
	border-right: 1px solid #d0d0d0;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	color: #444444;
	font-weight: normal;
	box-shadow: 0 0 0 1px #FFFFFF inset;
}

section#content .playerTableBackground {
	background-attachment: scroll, scroll, fixed;
    background-image: url("pageBG.jpg");
    background-position: center top, center bottom, center top;
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-size: auto auto, auto auto, cover;
}

<body style="background: none">
	<section id="content">
		<noscript>
			<div class="messagebox error">
				In deinem Webbrowser ist JavaScript deaktiviert.<br />Um das
				Ticketsystem nutzen zu können, muss JavaScript aktiviert sein.
				Andernfalls ist beispielsweise das Antworten auf Tickets nicht
				möglich.
			</div>
		</noscript>

		<div class="playerTableBackground">
			<table id="playerTable" class="table" style="opacity: 0.9;">
				<thead>
					<tr>
						<th>Name</th>
						<th>Sozialer Status</th>
						<th>Spielzeit</th>
						<th>Telefon</th>
						<th>Fraktion</th>
						<th>Freundschaft</th>
						<th>Ping</th>
					</tr>
				</thead>
				<tbody class="playerTableBody">
			</table>
		</div>
	</section>

</body>

我只能更改 div 的高度，但不能更改 table 或 tbody。你有什么解决办法吗？

Answer 1

我了解您需要让 tbody 具有特定的高度，因为数据是动态的。所以我给你的建议是这样的：

1. 最初显示“数据不可用”tr，如下所示。

2. 当数据准备好显示给用户时，将其标记为display: none，并在tbody中显示数据。

希望这会有所帮助。让我知道你的反馈。谢谢！

section#content {
	background-color: #ffffff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
	color: #444;
	display: table-cell;
	padding: 7px 18px 21px;
	vertical-align: top;
	width: 617px;
	display: table-cell;
	vertical-align: top;
}
section#content .table {
	border-radius: 5px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	background-clip: padding-box;
	border: 1px solid #d5d5d5;
	display: table;
}

section#content table.table {
	border-spacing: 0;
	width: 100%;
}

section#content table.table td {
	background-color: #f4f4f4;
	padding: 7px;
	text-align: left;
	vertical-align: middle;
	word-break: break-word;
	transition-property: background;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

section#content table.table tr:nth-child(even)>td {
	background-color: #ebebeb;
}

section#content table.table th {
	background-color: #ebebeb;
	border-bottom: 1px solid #d0d0d0;
	border-right: 1px solid #d0d0d0;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	color: #444444;
	font-weight: normal;
	box-shadow: 0 0 0 1px #FFFFFF inset;
}

section#content .playerTableBackground {
	background-attachment: scroll, scroll, fixed;
    background-image: url("pageBG.jpg");
    background-position: center top, center bottom, center top;
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-size: auto auto, auto auto, cover;
}

section#content table.table td.empty{
    height: 200px;
    text-align:center;
 }

<body style="background: none">
	<section id="content">
		<noscript>
			<div class="messagebox error">
				In deinem Webbrowser ist JavaScript deaktiviert.<br />Um das
				Ticketsystem nutzen zu können, muss JavaScript aktiviert sein.
				Andernfalls ist beispielsweise das Antworten auf Tickets nicht
				möglich.
			</div>
		</noscript>

		<div class="playerTableBackground">
			<table id="playerTable" class="table" style="opacity: 0.9;">
				<thead>
					<tr>
						<th>Name</th>
						<th>Sozialer Status</th>
						<th>Spielzeit</th>
						<th>Telefon</th>
						<th>Fraktion</th>
						<th>Freundschaft</th>
						<th>Ping</th>
					</tr>
				</thead>
				<tbody class="playerTableBody">
                  <tr>
                    <td class="empty" colspan="7">No data available!</td>
                    </tr>
                </tbody>
			</table>
		</div>
	</section>

</body>

Answer 2

桌子很特别。规范中未定义在桌子上设置高度。只需在 TH 上设置高度即可。

https://www.w3.org/TR/CSS2/tables.html#height-layout

17.5.3 表格高度算法

表格的高度由 'table' 或 'inline-table' 元素的 'height' 属性给出。 'auto' 的值意味着高度是行高加上任何单元格间距或边框的总和。任何其他值都被视为最小高度。 CSS 2.1 没有定义当 'height' 属性导致表格高于其他情况时如何分配额外空间。

section#content {
	background-color: #ffffff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
	color: #444;
	display: table-cell;
	padding: 7px 18px 21px;
	vertical-align: top;
	width: 617px;
	display: table-cell;
	vertical-align: top;
}
section#content .table {
	border-radius: 5px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	background-clip: padding-box;
	border: 1px solid #d5d5d5;
	display: table;
}

section#content table.table {
	border-spacing: 0;
	width: 100%;
}

section#content table.table td {
	background-color: #f4f4f4;
	padding: 7px;
	text-align: left;
	vertical-align: middle;
	word-break: break-word;
	transition-property: background;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

section#content table.table tr:nth-child(even)>td {
	background-color: #ebebeb;
}

section#content table.table th {
	height: 45px;
	background-color: #ebebeb;
	border-bottom: 1px solid #d0d0d0;
	border-right: 1px solid #d0d0d0;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	color: #444444;
	font-weight: normal;
	box-shadow: 0 0 0 1px #FFFFFF inset;
}

section#content .playerTableBackground {
	background-attachment: scroll, scroll, fixed;
    background-image: url("pageBG.jpg");
    background-position: center top, center bottom, center top;
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-size: auto auto, auto auto, cover;
}

<body style="background: none">
	<section id="content">
		<noscript>
			<div class="messagebox error">
				In deinem Webbrowser ist JavaScript deaktiviert.<br />Um das
				Ticketsystem nutzen zu können, muss JavaScript aktiviert sein.
				Andernfalls ist beispielsweise das Antworten auf Tickets nicht
				möglich.
			</div>
		</noscript>

		<div class="playerTableBackground">
			<table id="playerTable" class="table" style="opacity: 0.9;">
				<thead>
					<tr>
						<th>Name</th>
						<th>Sozialer Status</th>
						<th>Spielzeit</th>
						<th>Telefon</th>
						<th>Fraktion</th>
						<th>Freundschaft</th>
						<th>Ping</th>
					</tr>
				</thead>
				<tbody class="playerTableBody">
			</table>
		</div>
	</section>

</body>