0
我在table中有一个div，由于它的大小，这是需要溢出几个td的。 这适用于个人电脑，但在手机上，我有一些问题，它溢出页面外。检查的截图：div在页面外溢出
代码：
body {
font-family: Verdana, sans-serif;
height: 100%;
}
.kalender {height: 60vh;}
table, td, th {
text-align: left;
border: 1px solid black;
vertical-align: text-top;
padding: 5px;
font-size: 13px;
}
table {
height: 100%;
width: 100%;
}
th {
height: 6%;
background-color: #e7e7e7;
}
td {
width: 14.28%;
height: 15.6%;
position: relative;
}
.outer {
position: absolute;
font-size: 10px;
}
.details {
display: none;
background-color: gray;
overflow: visible;
border: 2px solid black;
float: left;
position: relative;
z-index: 10;
padding: 5px;
font-size: 12px;
}
.kortNavn {
position: relative;
top: 0;
left: 0;
display: flex;
text-align: center;
}
.skoleFri {
border-radius: 50%;
\t width: 8px;
\t height: 8px;
background-color:red;
display: inline-block;
}
.sfoFri {
border-radius: 50%;
\t width: 8px;
\t height: 8px;
background-color:blue;
display: inline-block;
}
div:hover > .details {display: block;}<div class="kalender">
<table *ngIf="datoer">
<tr>
<th>Man</th>
<th>Tir</th>
<th>Ons</th>
<th>Tor</th>
<th>Fre</th>
<th>Lør</th>
<th>Søn</th>
</tr>
<tr>
<td *ngFor="let cell of ukeEn()">
{{cell.text}}
<div class="outer" *ngIf="datoerContains(cell).fulltSkolenavn != null">
<div class="kortNavn" *ngFor="let kort of datoerContains(cell).kortSkolenavn">
{{kort}}
<div class="skoleFri"></div>
<div class="sfoFri" *ngIf="datoerContains(cell).sfoFri == true" ></div>
</div>
<div class="details" *ngFor="let skole of datoerContains(cell).fulltSkolenavn">
{{skole.skole}} <br>
{{skole.kommentar}} <br>
SFO: {{skole.sfodag}}
</div>
</div>
</td>
</tr>
</table>溢出的div是details类。这个div务必在td之内，因为如您所见，它取决于td中*ngFor的cell，当它调用details中的datoerContains(cell)时。
所以我需要找到一种方法来保持它在页面内。想法？
问题寻求帮助的代码必须包括必要的重现它最短的代码**在问题本身**最好在[**堆栈片段** ]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。请参阅[**如何创建最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –