17.5.3表高度算法

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的高度，但不能改变表格或者tbody。你有任何解决方案吗？

Answer 1

表格很特别。在规格中未定义表格的高度设置。只需在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>

Answer 2

我知道你需要让tbody具有特定的高度，因为数据是动态的。所以我对你的主张就是：

最初根据以下内容显示“数据不可用”tr。
准备好向用户显示数据时，请将其标记为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>

CSS表不会改变高度

2 个答案:

17.5.3表高度算法