My goal is to get my table columns aligned. My table is currently set up this way because I wanted to have a table with a scroll bar and give each row it's own border and margin. When the mouse overs over a row that row changes color. I have these features but now I am having trouble aligning my table columns.
This is what my table looks like currently.
The tbody has a scroll bar and the each tbody tr has a margin. The tbody has a fixed height of 25vh. The table, thead, th, tbody elements are hardcoded into the html. The tbody rows are written by jquery after the page loads. I have given the td and th elements a 1px solid black border to show you there margins and padding. I plan on removing them once I have aligned them.
Below is my static html code.
<h3 id = "UpdateEmpyeeCaption">Update Employee Table</h3>
<table id = "UpdateEmployeeTable" >
<thead id ="UpdateTableHeadders" >
<tr>
<th class = "UpHeaderCell">EmployeeID </th>
<th class = "UpHeaderCell">Firstname </th>
<th class = "UpHeaderCell">Lastname </th>
<th class = "UpHeaderCell">Username </th>
<th class = "UpHeaderCell">Password </th>
<th class = "UpHeaderCell">Lifeguard </th>
<th class = "UpHeaderCell">Instructor </th>
<th class = "UpHeaderCell">Headguard </th>
<th class = "UpHeaderCell">Supervisor </th>
</tr>
</thead>
<tbody id = "UpdateEmployeeTableinner">
</tbody>
</table>
Next is the function I use to append the table rows into the tbody.
function loadTable( employeelist )
{
var MSG = "";
EmployeeList = employeelist;
for( var emp in employeelist )
{
var id = employeelist[emp]["employeeID"];
var firstname = employeelist[emp]["Firstname"];
var lastname = employeelist[emp]["Lastname"];
var username = employeelist[emp]["Username"];
var Password = employeelist[emp]["Password"];
var lifeguard = "";
if ( employeelist[emp]["Lifeguard"] == true ){ lifeguard = "Yes"; }else{ lifeguard = "no"; }
var instructor = "";
if ( employeelist[emp]["Instructor"] == true ){ instructor = "Yes"; }else{ instructor = "no"; }
var headguard = "";
if ( employeelist[emp]["Headguard"] == true ){ headguard = "Yes"; }else{ headguard = "no"; }
var supervisor = "";
if ( employeelist[emp]["Supervisor"] == true ){ supervisor = "Yes"; }else{ supervisor = "no"; }
MSG += "<tr class = \"UpdateEmployeeCell notHoverTable\">";
MSG += "<td class =\"upEmCell\"> "+id+" </td>";
MSG += "<td class =\"upEmCell\"> "+firstname+" </td>";
MSG += "<td class =\"upEmCell\"> "+lastname+" </td>";
MSG += "<td class =\"upEmCell\"> "+username+" </td>";
MSG += "<td class =\"upEmCell\"> "+Password+" </td>";
MSG += "<td class =\"upEmCell\"> "+lifeguard+" </td>";
MSG += "<td class =\"upEmCell\"> "+instructor+" </td>";
MSG += "<td class =\"upEmCell\"> "+headguard+" </td>";
MSG += "<td class =\"upEmCell\"> "+supervisor+" </td>";
MSG += "</tr>";
}//End of for each employee in employeelist
//Put the rows into tbody of the table.
$('#UpdateEmployeeTableinner').empty();
$('#UpdateEmployeeTableinner').append( MSG );
}/* End of Function loadTable */
My Css being applied to the table in the pitcure
/* Start of Update Employee Table*/
/*table*/
#UpdateEmployeeTable {
border: 3px solid black;
margin: 0;
padding: 0 0 0 0;
overflow:hidden;
display: block;
}
/*thead*/
#UpdateTableHeadders {
background: rgb(221,221, 221);
display: block;
padding: 0em 1em 0em 1em;/* top right bottom left*/
margin: 0; /*margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>*/
border-bottom: 3px solid black;
}
/*th*/
.UpHeaderCell {
display: inline;
border: 1px solid black;
width: 11%;
}
/*tbody*/
#UpdateEmployeeTableinner {
border: 1px solid black;
background: white;
overflow: auto;
height: 25vh;
display: block;
}
/*tr inside tbody*/
.UpdateEmployeeCell {
border: 1px solid black;
margin: 0.5em 0.2em 0.5em 0.2em ; /*top right bottom left*/
display: block;
overflow: hidden;
padding: 0.1em;
}
/*td*/
.upEmCell {
display: inline-block;
border: 1px solid black;
}
/*When a table row does not have mouse hover*/
.notHoverTable {
background-color: rgb(4,211,255);
color: black;
border: 2px solid black;
}
/*When a table row does have mouse hover*/
.liOVERTable {
background-color: rgb(5, 255, 12);
border: 2px solid black;
color: black;
cursor: pointer;
cursor: hand;
}
/* End of Update Employee Table*/
So how can I change my CSS to display my table columns aligned with the correct spacing? Do I need to use Javascript to implement correct alignment? I would prefer keeping the solution as CSS.
