嵌套 CSS 网格放置在 HTML 表格元素内时会水平溢出
问题描述 投票：0回答：1
我在动态生成的发票中有一个 CSS 网格。我提前知道行数和列数。我还使用模板行和模板列，并专门为每列定义列宽，因为我需要以相同的格式在发票中使用它。所以我无法使用
auto为了简化代码示例，假设我有一个恰好有 7 列和 2 行的网格。第一行有 7 列。第二行有 1 列，跨度为 7 列。第二行中的这 1 列有一个 1 行 3 列的嵌套网格。当我在 html 中进行此设置时，这将按预期工作，如下所示。
但是当我将整个设置放在表格内时，它会水平破裂并溢出，如下所示。
使用表格的原因是当发票有多个页面时，thead 元素将有助于在所有页面中放置标题。现在我很困惑表带来的差异是什么导致出现水平滚动和溢出。
这是代码片段。
<html>
<head>
<style type="text/css">
body {
font-family: Calibri, monospace;
font-size: 0.8rem;
margin: 1rem;
border: 1px solid;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
page-break-inside: auto;
}
td section div {
page-break-inside: avoid;
}
table tbody td {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
main {
display: flex;
flex-direction: column;
height: 100%;
}
#invoiceitems {
display: block;
height: 100%;
text-transform: uppercase;
}
#itemscontent {
height: 100%;
display: grid;
grid-auto-rows: minmax(1rem, max-content);
grid-column-gap: 1px;
align-items: center;
}
#itemscontent>div {
display: flex;
align-items: center;
border: 1px solid;
height: 100%;
border-top: 0;
border-right: 0;
padding: 0 0.25rem;
}
.border-left-0 {
border-left: 0 !important;
}
.span-7 {
grid-column-start: span 7;
}
#invoiceinformation {
text-transform: none;
border-left: 0 !important;
display: grid !important;
grid: "note" "bankdetails" "signature";
grid-template-columns: minmax(min-content, 40%) minmax(min-content, 35%) minmax(min-content, 25%);
padding: 0 0.5rem;
}
#invoiceinformation div {
align-self: stretch;
align-items: center;
padding: 0 0.5rem;
}
#bankdetails {
border: 1px solid;
border-top: 0;
border-bottom: 0;
}
#signature {
display: flex;
border-left: 0 !important;
padding-right: 0.5rem !important;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<main style="padding-bottom: 0">
<section id="invoiceitems">
<section id="itemscontent"
style="grid-template-columns: minmax(min-content, max-content) minmax(min-content, auto) max-content max-content max-content max-content max-content; grid-template-rows: repeat(2, minmax(1rem, max-content));">
<div class="border-left-0">S.No</div>
<div>Description</div>
<div><b></b></div>
<div>Days</div>
<div>Unit</div>
<div>Price</div>
<div>Unit Price</div>
<div id="invoiceinformation" class="span-7">
<div id="note">
<small>NOTE</small>
<br>
<text>Certified that the particulars
given above are true and correct</text>
</div>
<div id="bankdetails">
<small>COMPANY BANK DETAILS</small>
<br>
<text>BANK:
ABC BANK, A/C. NO: 1111111111111111, IFSC: IABC0000000, Branch: DEF
Road, GHI</text>
</div>
<div id="signature">
<text><b>for ABC</b>
<br>
<br>
<br>Authorized Signatory</text>
</div>
</div>
</section>
</section>
</main>
</td>
</tr>
</tbody>
</table>
<!-- <main style="padding-bottom: 0">
<section id="invoiceitems">
<section id="itemscontent"
style="grid-template-columns: minmax(min-content, max-content) minmax(min-content, auto) max-content max-content max-content max-content max-content; grid-template-rows: repeat(2, minmax(1rem, max-content));">
<div class="border-left-0">S.No</div>
<div>Description</div>
<div><b></b></div>
<div>Days</div>
<div>Unit</div>
<div>Price</div>
<div>Unit Price</div>
<div id="invoiceinformation" class="span-7">
<div id="note">
<small>NOTE</small>
<br>
<text>Certified that the particulars
given above are true and correct</text>
</div>
<div id="bankdetails">
<small>COMPANY BANK DETAILS</small>
<br>
<text>BANK:
ABC BANK, A/C. NO: 1111111111111111, IFSC: IABC0000000, Branch: DEF
Road, GHI</text>
</div>
<div id="signature">
<text><b>for ABC</b>
<br>
<br>
<br>Authorized Signatory</text>
</div>
</div>
</section>
</section>
</main> -->
</body>
</html>请问你能帮我吗？
1个回答
0
投票
投票
因此，对于
autoautomax-content body {
font-family: Calibri, monospace;
font-size: 0.8rem;
margin: 1rem;
border: 1px solid;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
page-break-inside: auto;
}
td section div {
page-break-inside: avoid;
}
table tbody td {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
main {
display: flex;
flex-direction: column;
height: 100%;
}
#invoiceitems {
display: block;
height: 100%;
text-transform: uppercase;
}
#itemscontent {
height: 100%;
display: grid;
grid-auto-rows: minmax(1rem, max-content);
grid-column-gap: 1px;
align-items: center;
}
#itemscontent>div {
display: flex;
align-items: center;
border: 1px solid;
height: 100%;
border-top: 0;
border-right: 0;
padding: 0 0.25rem;
}
.border-left-0 {
border-left: 0 !important;
}
.span-7 {
grid-column-start: span 7;
}
#invoiceinformation {
text-transform: none;
border-left: 0 !important;
display: grid !important;
grid: "note" "bankdetails" "signature";
grid-template-columns: minmax(min-content, 40%) minmax(min-content, 35%) minmax(min-content, 25%);
padding: 0 0.5rem;
}
#invoiceinformation div {
align-self: stretch;
align-items: center;
padding: 0 0.5rem;
}
#bankdetails {
border: 1px solid;
border-top: 0;
border-bottom: 0;
}
#signature {
display: flex;
border-left: 0 !important;
padding-right: 0.5rem !important;
}<table>
<tr>
<td>
<main style="padding-bottom: 0">
<section id="invoiceitems">
<section id="itemscontent"
style="grid-template-columns: auto auto auto auto auto auto auto;">
<div class="border-left-0">S.No</div>
<div>Description</div>
<div><b></b></div>
<div>Days</div>
<div>Unit</div>
<div>Price</div>
<div>Unit Price</div>
<div id="invoiceinformation" class="span-7">
<div id="note">
<small>NOTE</small>
<br>
<text>Certified that the particulars
given above are true and correct</text>
</div>
<div id="bankdetails">
<small>COMPANY BANK DETAILS</small>
<br>
<text>BANK:
ABC BANK, A/C. NO: 1111111111111111, IFSC: IABC0000000, Branch: DEF
Road, GHI</text>
</div>
<div id="signature">
<text><b>for ABC</b>
<br>
<br>
<br>Authorized Signatory</text>
</div>
</div>
</section>
</section>
</main>
</td>
</tr>
</table>
最新问题
- 在 WPF 应用程序中使用 MediaElement 控件重复 gif 文件动画
- 理解Python异步编程
- 混合设计调节模型的 SPSS 分析
- spark 流可视化
- JPA OR 查询在 2 个字段中搜索 1 个作为参数传递的值
- Razorpay付款失败，如何继续付款？
- 如何在不实现自己的数据库后端的情况下保存站点的状态？
- 如何在c中将无符号字符打印为人类可读的格式？
- CUDA共享内存编程不起作用
- VSCode 在 launch.json 中抱怨“配置的调试类型‘cppvsdbg’已安装，但在此环境中不受支持。”
- 为什么 SparkUI 在“作业”选项卡下仅显示 DAG 中的操作，而不显示任何转换？
- 分析进出进程的网络流量
- 为什么我在此 Solidity 代码中遇到错误？
- 如何修复 Terraform 中的“错误：创建 CloudTrail Trail：InsufficientS3BucketPolicyException：检测到存储桶的 S3 存储桶策略不正确”
- 尽管配置正确，C/C++ 调试器仍无法在 VSC 中工作
- 通过引用遍历节点的惯用方法
- Node 类——我疯了吗？
- 如何接收带有空数据的套接字消息？
- Python Sentinel 不工作
- CUDA 动态并行的替代方案
© www.soinside.com 2019 - 2024. All rights reserved.