Search code examples
htmlcssalignmentheightcss-tables

CSS Table won't change height

I have this body and CSS for the section #content:

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>

I can only change the height of the div, but neither the table or tbody. Do you have any solutions?

Solution

  • I understand that you need to have tbody to have a specific height as the data comes dynamically. So my proposition to you is this:

    1. Initially show a "data not available" tr as per below.

    2. When data is ready to be shown to the user mark it as display: none and show the data inside the tbody.

    Hope this helps. Let me know your feedback. Thanks!

    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>