css - 如何不垂直溢出表格单元格并打印表格?
问题描述
我知道对此有很多问题,但他们的解决方案都不适合我。
我有一个仅由一个表格(我想打印)组成的 html 页面,我希望表格完全适合水平 a4 表。
这是我没有文字的表(是比赛裁判):
问题是当我添加一些文本时,高度会发生变化。
我尝试在td中添加具有高度的div,但这效果不佳...
另外我想知道如何水平打印页面,导致我的表格溢出打印区域......
这是我的表的一个例子:
<table>
<tr>
<td>
<div>BLABLABLA</div>
</td>
</tr>
...
...
...
</table>
解决方案
我建议用来table-layout: fixed
管理表格和单元格的大小。然后如下面的示例所示管理溢出。这给了你拉伸的桌子,它不会使高度适应内容。
.myTable {
table-layout: fixed;
width: 100%;
height: 100%;
}
.myTable tr td div{
overflow: hidden;
border: 1px solid #333;
height: 20px;
}
.myTable tr.higher td div {
height: 40px;
}
<table class="myTable">
<tr>
<td><div>A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.</div></td>
<td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
</tr>
<tr class="higher">
<td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
<td><div>A lot of text to display. A lot of text to display.</div></td>
</tr>
</table>
您可以将其插入@media print
并正确调整到您的桌子。
参考:
推荐阅读
- swiftui - 如何为嵌套在“.navigationBarItems”中的按钮设置动画
- javascript - 我需要在正则表达式 javascript 中获得第二组
- bootstrap-4 - 麻烦为我的底部定位弹出箭头设置样式
- angular - 如何使用 ionic 4 在数组列表中绑定类似按钮?
- python - 如何在 keras 中为 k 折交叉验证编写代码
- android - 谷歌地图密钥和谷歌地点密钥。
标签问题 Android - excel - 将数据从用户窗体中的文本框插入单元格并循环到下一个单元格
- ajax - laravel 视图中的 gtm 数据层影响其他页面一些 ajax 不起作用 500 内部服务器错误
- python - Discord 错误:命令引发异常:NameError:未定义名称“消息”
- python - 在python中重新计算字典中的值