美文网首页PHP工作笔记
表格中单元格td自适应高度,最大高度后滚动条显示

表格中单元格td自适应高度,最大高度后滚动条显示

作者: Pureven | 来源:发表于2018-05-02 22:02 被阅读0次

因项目需要弹框显示信息,由于信息过多导致表格很难看,网上查到可以设置单元格自适应高度,设置一个最大高度,当达到最大高度后将显示滚动条,弥补了单元格过度膨胀带来的困扰!

单元格自适应高度是在单元格中内嵌div,即<td><div></div></td>
通过设置div达到自适应高度,最大高度后显示滚动条的效果。
样式设置:style="overflow-y:scroll;max-height:130px;"
如图:
···
<tr class="t_tr">
<td class="td2"><?php echo "跳过文件"; ?></td>
<td class="td2" id="file_skiped"><div style="overflow-y:scroll;max-height:130px;"><?php echo "C:\Windows\Boot\BootDebuggerFiles.ini;
C:\Windows\Boot\bootvhd.dll;
C:\Windows\Boot\boot.stl;
C:\Windows\Boot\memtest.efi;
C:\Windows\Boot\bootmgfw.efi;
"
. "C:\Windows\Boot\BootDebuggerFiles.ini;
C:\Windows\Boot\bootvhd.dll;
C:\Windows\Boot\boot.stl;
C:\Windows\Boot\memtest.efi;
C:\Windows\Boot\bootmgfw.efi;"; ?></div></td>
</tr>
<tr class="t_tr">
<td class="td2"><?php echo "失败文件夹"; ?></td>
<td class="td2" id="dir_failed"><div style="overflow-y:scroll;max-height:130px;"><?php echo "C:\$Recycle.Bin\
C:\PerfLogs\
C:\ProgramData\Microsoft\Network\Downloader\"; ?></div></td>
</tr>
<tr class="t_tr">
<td class="td2"><?php echo "失败项目"; ?></td>
<td class="td2" id="project_failed"><div style="overflow-y:scroll;max-height:130px;"><?php echo "i2"; ?></div></td>
</tr>
···

image.png

相关文章

网友评论

    本文标题:表格中单元格td自适应高度,最大高度后滚动条显示

    本文链接:https://www.haomeiwen.com/subject/wcrhrftx.html