Overlay/overlap elements - html

Question

See my code:
<table id="preview_table">
<thead>
<tr>
<th class="not_mapped_style" style="display: none; text-align: center;">id</th>
<th init_value="Name" style="text-align: center;" class="">
<div class="mapped_col">mapped!</div>
<div class="col_name">DisplayName</div>
<div class="user_def_col">(user defined)</div>
</th>
<th init_value="Email" style="text-align: center;" class="">
<div class="mapped_col">mapped!</div>
<div class="col_name">PrimaryEmail</div>
<div class="user_def_col">(user defined)</div>
</th>
<th init_value="Age" style="text-align: center;" class="">
<div class="mapped_col">mapped!</div>
<div class="col_name">Age</div>
<div class="user_def_col">(user defined)</div>
</th>
</tr>
</thead>
<caption>List</caption>
<tbody>
<tr>
<td style="display: none;" property_value="0" property_name="id" align="center">0</td>
<td class="" property_value="user" property_name="DisplayName" align="center">user</td>
<td class="" property_value="admin#domain.com" property_name="PrimaryEmail" align="center">admin#domain.com</td>
<td class="" property_value="69" property_name="Age" align="center">69</td>
<td class="" property_value="[phone]" property_name="Hand_Phone" align="center">[phone]</td>
</tr>
</tbody>
here is CSS:
#preview_table .user_def_col {
color: gray;
font-size: .8em;
}
#preview_table .mapped_col {
color: green;
font-size: .6em;
float: right;
position: relative;
top: -10px;
}
Currently my mapped! text corrupts centering for column header names. I wonder is that possible to overlay mapped! text over header column name (e.g. Age) while column name remain centered by it cell by width?

Answer 1

You can put "mapped!" into a span and use absolute positioning (parent cell would need to have position:relative)

Answer 2

Please check the following code. I changed the font-size and added color to rows, so that the UI is visible properly..
<table id="preview_table">
<caption>List</caption>
<thead>
<tr>
<th class="not_mapped_style" style="display: none; text-align: center;">id</th>
<th init_value="Name" style="text-align: center;" class="">
<div class="col_name">DisplayName</div>
<div class="user_def_col">(user defined)</div>
<div class="mapped_col">MAPPED!!!!</div>
</th>
<th init_value="Email" style="text-align: center;" class="">
<div class="col_name">PrimaryEmail</div>
<div class="user_def_col">(user defined)</div>
<div class="mapped_col">MAPPED!!!!</div>
</th>
<th init_value="Age" style="text-align: center;" class="">
<div class="col_name">Age</div>
<div class="user_def_col">(user defined)</div>
<div class="mapped_col">MAPPED!!!!</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display: none;" property_value="0" property_name="id" align="center">0</td>
<td class="" property_value="user" property_name="DisplayName" align="center">user</td>
<td class="" property_value="admin#domain.com" property_name="PrimaryEmail" align="center">admin#domain.com</td>
<td class="" property_value="69" property_name="Age" align="center">69</td>
<td class="" property_value="[phone]" property_name="Hand_Phone" align="center">[phone]</td>
</tr>
</tbody>
</table​>
CSS:
#preview_table .user_def_col {
color: gray;
font-size: 15px;
}
#preview_table .mapped_col {
color: green;
font-size: 12px;
position: relative;
margin-top: -20px;
opacity: 0.5;
}
tr
{
border: 1px solid red;
}
​