Big <div> inside smaller <td> - html

Question

I am working with a calendar, created with table. When clicking a td, I want a div to show up. This is pretty easy, but the problem is that the div will be bigger than the td, and then it expands the td's size. I want it to not affect the td's size, and being put on top of the td (in it's full size).
HTML:
<table *ngIf="datoer">
<tr>
<td
*ngFor="let cell of ukeEn()">{{cell.text}}
<div class="details"> </div>
</td>
</tr>
</table>
CSS:
body {
font-family: Verdana, sans-serif;
height: 100%;
}
table, td, th {
text-align: left;
border: 1px solid black;
vertical-align: text-top;
padding: 5px;
}
table {
height: 100%;
width: 100%;
}
td {
width: 14.28%;
height: 16.6%;
}
Anyone?

Answer 1

I would use
Position relative on your td
And position absolute on your div
That way when somebody hover over the certain td the div will be displayed
td > div { position: absolute; display: none;} td:hover > div {display: block;}
Codepen example

Answer 2

Correct me if I'm wrong, but if you're trying to overlap the div above the TD couldn't you just assign the div a higher z-index in the CSS versus the TD element? It seems like that would be the most straightforward way to accomplish what it sounds like you're asking.

Answer 3

I would use something similar to the code below.
Basically, when the mouse enters a td - the contents of the data attribute are copied onto a hidden div and then displayed (relative to the cursor's position)
This prevents duplicate code (i.e. inner divs) when not used.
See code below (only Monday and Thursday have data in it).
$(function() {
var mouseX;
var mouseY;
// keep track of mouse coordinates
$(document).mousemove(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$('body').on('mouseout', function() {
$('#hiddenContent').hide();
});
$('td').on('mouseover', function() {
var contentHtml = $(this).data('cal');
if (contentHtml) { // move hidden div to mouse coordinates
$('#hiddenContent').css({
'top': mouseY,
'left': mouseX
});
// add content and toggle
$('#hiddenContent').text(contentHtml).show();
}
});
});
#hiddenContent {
display: none;
z-index: 100;
border: 5px solid gray;
width: 300px;
position: absolute;
background-color: white;
}
td {
color: red;
text-align: center;
border: 1px solid blue;
}
th {
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
<tr>
<td data-cal="on mon we have many things">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td data-cal="on friday we have many things too">5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
<div id="hiddenContent">
this is hidden
</div>