MariusJ MariusJ - 1 month ago 8
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).

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

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

Comments