跨越固定表高度的列分隔符

时间:2018-12-31 18:42:12

标签: html css jinja2

我目前正在尝试制作一个使用html和jinja2样式的pdf文件,以重新创建运输标签,但根据传递给html模板的参数使它可编程。我遇到的问题是,原始装运标签的表大小固定,与条目无关。解决了桌子固定高度的问题后,我找不到让列分隔符一直到桌子底部的方法。

我尝试在列条目的底部添加填充以将列扩展到底部,但是问题是模板需要可编程以接受用户想要的任意数量的条目。所以我需要能够设置一个固定高度的垂直分隔线

table style="height: 350px; display: inline-block; width: 100%; border: black solid 1px; border-bottom: solid black 18px;" rules="cols">
    <thead style="background-color: black">
      <tr>
      <td align="center" width="25px" style="color: white; background-color: black">ORD<br/>QTY.</td>
      <td align="center" width="25px" style="color: white; background-color: black">B/O<br/>QTY.</td>
      <td align="center" width="25px" style="color: white; background-color: black">SHP<br/>QTY.</td>
      <td align="center" width="72.5" style="color: white; padding-left: 15px; padding-right:15px; background-color: black">PRICE</td>
      <td align="center" width="72.5" style="color: white; padding-left: 15px; padding-right:15px; background-color: black">TOTAL</td>
      <td align="center" width="72.5" style="color: white; padding-left: 15px; padding-right:15px; background-color: black">ITEM NO.</td>
      <td align="center" width="72.5 " style="color: white; padding-left: 15px; padding-right:15px; background-color: black">STYLE</td>
      <td align="center" width="450px" style="color: white; padding-left: 25px; padding-right:15px; background-color: black">DESCRIPTION</td>
      <td align="center" width="25px" style="color: white;">GW</td>
    </tr>
    </thead>
    <tbody style="overflow-y: auto;">
      <tr>
      <td align="center" style="">{{data.ordQty1}}</td>
      <td align="center" style="">{{data.BoQty1}}</td>
      <td align="center" style="">{{data.ShpQty1}}</td>
      <td align="center" style="">${{data.price1}}</td>
      <td align="center" style="">${{data.total1}}</td>
      <td align="center" style="">{{data.itemNo1}}</td>
      <td align="center" style="">{{data.style1}}</td>
      <td align="center" style="">{{data.description1}}</td>
      <td align="center" style=""></td>
    </tr>
    </tbody>

  </table>

0 个答案:

没有答案