MariusJ MariusJ - 9 months ago 40
CSS Question

Big <div> inside smaller <td>

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).


<table *ngIf="datoer">
*ngFor="let cell of ukeEn()">{{cell.text}}
<div class="details"> </div>


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%;


Answer Source

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 { position: relative;} td > div { position: absolute; display: none;} td:hover > div {display: block;

Codepen example