gpt4 book ai didi

css - 如何不垂直溢出表格单元格并打印表格?

转载 作者:太空宇宙 更新时间:2023-11-04 06:36:25 24 4
gpt4 key购买 nike

我知道有很多关于此的问题,但他们的解决方案都不适合我。

我有一个仅由一个表格组成的 html 页面(我想要打印),我希望该表格完全适合水平的 a4 纸。

这是我没有文字的表格(是比赛裁判):

myTable
(来源:i.ibb.co)

问题是,当我添加一些文本时,高度会发生变化。

我尝试在 td 中添加 div 并设置高度,但这效果不佳...

我也想知道如何水平打印页面,导致我的表格溢出打印区域...

这是我的表格的一个例子:

<table>
<tr>
<td>
<div>BLABLABLA</div>
</td>
</tr>
...
...
...
</table>

最佳答案

我建议使用 table-layout: fixed 来管理表格和单元格的大小。然后如下例所示管理溢出。这给你拉伸(stretch)表,它不会根据内容调整高度。

.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 中并根据您的表格进行适当调整。

引用资料:

关于css - 如何不垂直溢出表格单元格并打印表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54181543/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com