I want to display a description when hovering over the main part of a table, but the first td expands and the other td in another td doesn't show on the full line. I really have no idea what's causing this. I've been staring on this for more than 2 hours and I could not find a solution.

 

CSS:

#Serverlist table:not(#ServerField) {
background-color: #f3f3f3;
margin-top: 20px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
width: 100%;
border: 1px solid #e6e6e6;
border-radius: 3px;
}
#ServerField {
background-color: #f3f3f3;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#Serverlist table td:not(#Number) {
max-width: 50px;
width: auto;
min-width: 50px;
}
#ServerDesc td {
max-height: 20px;
min-height: 20px;
}
#Serverlist a {
text-decoration: none;
color: black;
}
#Serverlist #ListInfo {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 17pt;
}
#ServerInfo:hover {
background: white;
}
#ServerField #ServerDesc {
-webkit-transition: height 0.15s ease-in-out;
-moz-transition: height 0.15s ease-in-out;
-o-transition: height 0.15s ease-in-out;
transition: height 0.15s ease-in-out;

display: none;
width: 100%;
}
#ServerField:hover #ServerDesc {
display: block;
}

 

PHP/HTML:

echo '<div id ="Serverlist">';
echo '<table>';
	echo '<tr id="ListInfo">';
		echo '<td>' . $Translations[$Language]["LIST"][1] . '</td>';
		//echo '<td>' . $Translations[$Language]["LIST"][2] . '</td>';
		echo '<td>' . $Translations[$Language]["LIST"][3] . '</td>';
		echo '<td>' . $Translations[$Language]["LIST"][4] . '</td>';
		echo '<td>' . $Translations[$Language]["LIST"][5] . '</td>';
		echo '<td>' . $Translations[$Language]["LIST"][6] . '</td>';
	echo '</tr>';
echo '</table>';

echo '<table id="ServerField">';
	for($i=0;$i<count($Names);$i++) {
			echo '<table id="ServerField">'; 

			echo '<tr id="ServerInfo">';
				echo '<td id="Number">' . ($i+1) . '</td>';
				echo '<td>' . $ServerList["Names"][$i] . '</td>';
				//echo '<td>' . $ServerList["Descriptions"][$i] . '</td>';
				echo '<td>' . $ServerList["IPs"][$i] . '</td>';
				echo '<td>' . $ServerList["Accounts"][$i] . '</td>';
				echo '<td> <a href="index.php?s=vote&id=' . $ServerList["IDs"][$i] . '">' . $Translations[$Language]["LIST"][7] . '</a> ' . $ServerList["Votes"][$i] . '</td>';
				echo '<td>' . date("d.m.y - H:i",$ServerList["Dates"][$i]) . '</td>';
			echo '</tr>';

			echo '<tr id="ServerDesc">';
				echo '<td>THIS IS THE DESCRIPTION! TR</td>';
				echo '<td>2</td>';
			echo '</tr>';

			echo '</table>';
	}
echo '</table>';
echo '</div>';

 

How it looks when not hovering over it:

 

How it looks when hovering over it:

There's 6 columns in #ServerInfo row, but only 2 in the #ServerDesc

 

Try something like:

echo '<tr id="ServerDesc">';
      echo '<td colspan="5">THIS IS THE DESCRIPTION! TR</td>';
      echo '<td>2</td>';
echo '</tr>';

 

So that the #ServerDesc has 6 columns as well

Edited June 24, 201214 yr by Spitfire

There's 6 columns in #ServerInfo row, but only 2 in the #ServerDesc

 

Try something like:

echo '<tr id="ServerDesc">';
      echo '<td colspan="5">THIS IS THE DESCRIPTION! TR</td>';
      echo '<td>2</td>';
echo '</tr>';

 

So that the #ServerDesc has 6 columns as well

Already tried it and it doesn't do anything, any other things that I could try?

Then I'd assume it's down to all the duplicated id tags. ID's should be unique, replace them with classes.