python-3.x 使用CSS防止2列HTML报表过早换行

wj8zmpe1  于 2023-06-07  发布在  Python
关注(0)|答案(2)|浏览(113)

我正在用HTML和CSS构建一个两栏的“报告”（我对这两个都是新手），并通过Python中的Weasyprint将其打印到PDF中。我的问题是，第一列中的内容过早地 Package 到第二列中，最终导致一个应该保留在一列中的破碎表：

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;
  }
  @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}

并在HTML中调用此样式。此页的内容包含冗长的表格和文本。我的问题是table过早地 Package 了，我不知道为什么。理想情况下，我希望在第一列填满后将文本 Package 到第二列中。我的“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>
        <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>

我试着在我的CSS文件中添加一个div{}，并与nowrap property，modifying the CSS file混淆，并且也做了一些Google / SO搜索，但还没有找到解决方案。说实话我不确定我在找合适的措辞
编辑：Stefan的以下回答导致了我正在寻找的“棒球卡”解决方案：

python-3.x

2条答案

按热度按时间
x6yk4ghg

x6yk4ghg1#

为什么不使用一个div，其中每列有两个div。
就像这样：

<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>
赞(0）分享  回复(0）举报  2023-06-07
ccrfmcuu

ccrfmcuu2#

在你的代码中有两个问题，首先你在#satgeom section选择器中声明了你的列，这将使<section>元素分布在两列中，包括表，让表保持在一列中。

#satgeom section table {
    column-span: all;
}

另外，表是用<p>标签 Package 的表，让我们替换它：

<p>
  <table class="tg" style="table-layout: fixed; width: 300px">
  ...
  </table>
</p>

与

<table class="tg" style="table-layout: fixed; width: 300px">
...
</table>
赞(0）分享  回复(0）举报  2023-06-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com