英文:
Prevent premature wrapping in 2-column HTML report using CSS
问题
我正在使用HTML和CSS构建一个两列的“报告”，然后通过Python中的Weasyprint将其打印成PDF。我的问题是第一列中的内容过早地换行到第二列，最终导致表格损坏，应该保持在一列中。
HTML文件调用了CSS文件：
<html>
<head>
<meta charset="UTF-8">
<link href="report.css" rel="stylesheet">
<title>Report</title>
<meta name="description" content="Report example">
</head>
...
在某个地方，我在CSS中创建了一个名为“satgeom”的页面样式：
@page {
@top-left {
background: #FF874A;
content: counter(page);
height: 1cm;
text-align: center;
width: 1cm;
}
...
}
html {
color: #393939;
font-family: Montserrat;
font-size: 11pt;
font-weight: 300;
line-height: 1.5;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
#satgeom section {
columns: 2;
column-gap: 1cm;
}
并在HTML中调用这个样式。这个页面的内容包括一个很长的表格和文本。我的问题是表格过早地换行，我无法找出原因。理想情况下，我希望在第一列填满后将文本换行到第二列。以下是“satgeom”页面的HTML片段：
<article id="satgeom">
<h2 id="satgeom-title">Satellite geometry</h2>
<h3>Satellite geometry, depiction, and description</h3>
<section>
<img src="./satellite.png" alt="">
<p>
<table class="tg" style="table-layout: fixed; width: 300px">
<colgroup>
<col style="width: 150px">
<col style="width: 150px">
</colgroup>
<tr>
<td class="tg-zv4m">Name</th>
<td class="tg-ofj5">Uydu</th>
</tr>
<!-- 更多表格行 -->
</table>
</p>
<p>
Launched in 2024, the Uydu satellite was manufactured by the Turkish
Aerospace Industries for roughly $600,000,000. The satellite's mission
is
</p>
<p>
Construction-wise, the Uydu satellite comprises a main body and two
solar panel arrays extending laterally to its side. For power consumption,
the solar panels can be rotated to face the sun.
</p>
</section>
</article>
我已经尝试过在我的CSS文件中添加div{}并调整了nowrap属性、修改了CSS文件，还进行了多次Google和Stack Overflow搜索，但没有找到解决方法。坦白说，我不确定自己是否在寻找正确的短语。
编辑：Stefan的答案在下面提供了我寻找的“棒球卡”解决方案。
英文:
I'm building a two-column "report" in HTML and CSS (I'm new to both) and printing it to a PDF via Weasyprint in Python. My problem is that content in the first column is wrapping into the second column prematurely, ultimately resulting in a broken table that should remain in one column:
The HTML file calls the CSS file:
<html>
<head>
<meta charset="UTF-8">
<link href="report.css" rel="stylesheet">
<title>Report</title>
<meta name="description" content="Report example">
</head>
...
at some point, I create a page style in CSS called "satgeom":
@page {
@top-left {
background: #FF874A;
content: counter(page);
height: 1cm;
text-align: center;
width: 1cm;
}
@top-center {
background: #FF874A;
content: '';
display: block;
height: .05cm;
opacity: .5;
width: 100%;
}
@top-right {
content: string(heading);
font-size: 9pt;
height: 1cm;
vertical-align: middle;
width: 100%;
}
}
@page :blank {
@top-left { background: none; content: '' }
@top-center { content: none }
@top-right { content: none }
}
@page no-chapter {
@top-left { background: none; content: none }
@top-center { content: none }
@top-right { content: none }
}
@page :first {
background: url(report_cover.png) no-repeat center;
background-size: cover;
margin: 0;
}
@page chapter {
background: #FF874A;
margin: 0;
@top-left { content: none }
@top-center { content: none }
@top-right { content: none }
}
html {
color: #393939;
font-family: Montserrat;
font-size: 11pt;
font-weight: 300;
line-height: 1.5;
}
h1 {
color: #FF874A;
font-size: 38pt;
margin: 5cm 2cm 0 2cm;
page: no-chapter;
width: 100%;
}
h2, h3, h4 {
color: black;
font-weight: 400;
}
h2 {
break-before: always;
font-size: 28pt;
string-set: heading content();
}
h3 {
font-weight: 300;
font-size: 15pt;
}
h4 {
font-size: 13pt;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
#satgeom section {
columns: 2;
column-gap: 1cm;
}
#satgeom section p {
text-align: justify;
}
/* Table */
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;word-break:normal;}
.tg .tg-zv4m{border-color:#fcbb9a;text-align:left;vertical-align:top}
.tg .tg-ofj5{border-color:#fcbb9a;text-align:right;vertical-align:top}
and call this style in the HTML. The contents of this page contain a lengthy table and text. My problem is that the table is wrapping prematurely, and I cannot figure out why. Ideally, I would like to wrap the text into the second column after the first column fills up. A snippet of my HTML for the "satgeom" page is as follows:
<article id="satgeom">
<h2 id="satgeom-title">Satellite geometry</h2>
<h3>Satellite geometry, depiction, and description</h3>
<section>
<img src="./satellite.png" alt="">
<p>
<table class="tg" style="table-layout: fixed; width: 300px">
<colgroup>
<col style="width: 150px">
<col style="width: 150px">
</colgroup>
<tr>
<td class="tg-zv4m">Name</th>
<td class="tg-ofj5">Uydu</th>
</tr>
<tr>
<td class="tg-zv4m">Cost [$]</th>
<td class="tg-ofj5">600,000,000</th>
</tr>
<tr>
<td class="tg-zv4m">Manufacturer</td>
<td class="tg-ofj5">TAI</td>
</tr>
<tr>
<td class="tg-zv4m">Duration [years]</td>
<td class="tg-ofj5">15</td>
</tr>
<tr>
<td class="tg-zv4m">Orbit altitude [km]</td>
<td class="tg-ofj5">35,785</td>
</tr>
<tr>
<td class="tg-zv4m">Max. velocity [km/s]</td>
<td class="tg-ofj5">11,051</td>
</tr>
<tr>
<td class="tg-zv4m">Dy mass [kg]</td>
<td class="tg-ofj5">1,577</td>
</tr>
<tr>
<td class="tg-zv4m">NORAD ID</td>
<td class="tg-ofj5"> - </td>
</tr>
<tr>
<td class="tg-zv4m">Uplink [GHz]</td>
<td class="tg-ofj5">7.3 - 18.10</td>
</tr>
<tr>
<td class="tg-zv4m">Downlink [GHz]</td>
<td class="tg-ofj5">11.70 - 12.75</td>
</tr>
<tr>
<td class="tg-zv4m">Reference frame</td>
<td class="tg-ofj5">Geocentric</td>
</tr>
<tr>
<td class="tg-zv4m">Regime</td>
<td class="tg-ofj5">Geostationary</td>
</tr>
</table>
</p>
<p>
Launched in 2024, the Uydu satellite was manufactured by the Turkish
Aerospace Industries for roughly $600,000,000. The satellite's mission
is
</p>
<p>
Construction-wise, the Uydu satellite comprises a main body and two
solar panel arrays extending laterally to its side. For power consumption,
the solar panels can be rotated to face the sun.
</p>
</section>
</article>
I've tried adding a div{} to my CSS file and messed with the nowrap property, modifying the CSS file, and have also done a number of Google / SO searches, but haven't found a solution. Honestly, I'm not sure I'm looking for the right phrases.
Edit:
Stefan's answer below resulted in the "baseball card" solution I was looking for:
答案1
得分: 1
为什么不使用一个包含两个内部div的div来表示每一列。
类似于这样的结构：
<article id="satgeom">
<h2 id="satgeom-title">卫星几何</h2>
<h3>卫星几何、描绘和描述</h3>
<div style="display: flex;">
<div style="width: 50%; padding-right: 2em;">
<img style="width: 100%;" src="./satellite.png" alt="">
<table class="tg" style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 150px">
<col style="width: 150px">
</colgroup>
<tr>
<td class="tg-zv4m">名称</td>
<td class="tg-ofj5">Uydu</td>
</tr>
<tr>
<td class="tg-zv4m">成本 [$]</td>
<td class="tg-ofj5">600,000,000</td>
</tr>
<tr>
<td class="tg-zv4m">制造商</td>
<td class="tg-ofj5">TAI</td>
</tr>
<tr>
<td class="tg-zv4m">运行时间 [年]</td>
<td class="tg-ofj5">15</td>
</tr>
<tr>
<td class="tg-zv4m">轨道高度 [km]</td>
<td class="tg-ofj5">35,785</td>
</tr>
<tr>
<td class="tg-zv4m">最大速度 [km/s]</td>
<td class="tg-ofj5">11,051</td>
</tr>
<tr>
<td class="tg-zv4m">动力质量 [kg]</td>
<td class="tg-ofj5">1,577</td>
</tr>
<tr>
<td class="tg-zv4m">NORAD ID</td>
<td class="tg-ofj5"> - </td>
</tr>
<tr>
<td class="tg-zv4m">上行链路 [GHz]</td>
<td class="tg-ofj5">7.3 - 18.10</td>
</tr>
<tr>
<td class="tg-zv4m">下行链路 [GHz]</td>
<td class="tg-ofj5">11.70 - 12.75</td>
</tr>
<tr>
<td class="tg-zv4m">参考框架</td>
<td class="tg-ofj5">地心</td>
</tr>
<tr>
<td class="tg-zv4m">制度</td>
<td class="tg-ofj5">静止</td>
</tr>
</table>
</div>
<div style="width: 50%;">
<p>
Uydu卫星于2024年发射，由土耳其航空航天工业制造，成本约为$600,000,000。该卫星的任务是
</p>
<p>
在构造上，Uydu卫星由一个主体和两个太阳能电池板数组组成，横向延伸到其侧面。为了供电消耗，太阳能电池板可以旋转以面向太阳。
</p>
</div>
</div>
</article>
英文:
Why not use a div with two divs inside it for each column.
Something like this:
<article id="satgeom">
<h2 id="satgeom-title">Satellite geometry</h2>
<h3>Satellite geometry, depiction, and description</h3>
<div style="display: flex;">
<div style="width: 50%; padding-right: 2em;">
<img style="width: 100%;" src="./satellite.png" alt="">
<table class="tg" style="table-layout: fixed; width: 100%">
<colgroup>
<col style="width: 150px">
<col style="width: 150px">
</colgroup>
<tr>
<td class="tg-zv4m">Name</td>
<td class="tg-ofj5">Uydu</td>
</tr>
<tr>
<td class="tg-zv4m">Cost [$]</td>
<td class="tg-ofj5">600,000,000</td>
</tr>
<tr>
<td class="tg-zv4m">Manufacturer</td>
<td class="tg-ofj5">TAI</td>
</tr>
<tr>
<td class="tg-zv4m">Duration [years]</td>
<td class="tg-ofj5">15</td>
</tr>
<tr>
<td class="tg-zv4m">Orbit altitude [km]</td>
<td class="tg-ofj5">35,785</td>
</tr>
<tr>
<td class="tg-zv4m">Max. velocity [km/s]</td>
<td class="tg-ofj5">11,051</td>
</tr>
<tr>
<td class="tg-zv4m">Dy mass [kg]</td>
<td class="tg-ofj5">1,577</td>
</tr>
<tr>
<td class="tg-zv4m">NORAD ID</td>
<td class="tg-ofj5"> - </td>
</tr>
<tr>
<td class="tg-zv4m">Uplink [GHz]</td>
<td class="tg-ofj5">7.3 - 18.10</td>
</tr>
<tr>
<td class="tg-zv4m">Downlink [GHz]</td>
<td class="tg-ofj5">11.70 - 12.75</td>
</tr>
<tr>
<td class="tg-zv4m">Reference frame</td>
<td class="tg-ofj5">Geocentric</td>
</tr>
<tr>
<td class="tg-zv4m">Regime</td>
<td class="tg-ofj5">Geostationary</td>
</tr>
</table>
</div>
<div style="width: 50%;">
<p>
Launched in 2024, the Uydu satellite was manufactured by the Turkish
Aerospace Industries for roughly $600,000,000. The satellite's mission
is
</p>
<p>
Construction-wise, the Uydu satellite comprises a main body and two
solar panel arrays extending laterally to its side. For power consumption,
the solar panels can be rotated to face the sun.
</p>
</div>
</div>
</article>
答案2
得分: 0
Here is the translated code:
在你的代码中有两个问题。首先，你已经在`#satgeom section`选择器内声明了部分的列，这将使`<section>`元素跨越两列，包括表格。让我们将表格保留在一列中。
#satgeom section table {
column-span: all;
}
另外，表格被包裹在`<p>`标签中，让我们替换它：
<table class="tg" style="table-layout: fixed; width: 300px">
...
</table>
英文:
There is 2 problem in your code, first you have declared your columns for the section within the #satgeom section selector, that will make the <section> element distributed across two columns, including the table, lets make the table stays in one column.
#satgeom section table {
column-span: all;
}
Also the table is wrapped table with a <p> tag, lets replace this:
<p>
<table class="tg" style="table-layout: fixed; width: 300px">
...
</table>
</p>
with
<table class="tg" style="table-layout: fixed; width: 300px">
...
</table>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论