即使数据不足，列边框也可填充整个表格

Question

我正在制作动态表格，我不知道我将拥有多少个：

<div style="height: 20cm">
  <table cellpadding="0" cellspacing="0" style="border-spacing:0;border-collapse:0;font-size:12px;width: 100%;text-transform:uppercase;">
    <thead>
      <tr style="font-weight:bold">
        <th style="width:9%;border-bottom:1px solid black;padding:6px;" align="center">cantidad</th>
        <th style="width:12%;border:1px solid black;border-top:0 none;padding:6px;" align="center">codigo</th>
        <th style="width:79%;border-bottom:1px solid black;padding:6px;align: center" align="center">descripcion</th>
      </tr>
    </thead>
    <tbody style="border-bottom: none;">
      <tr t-foreach="o.pack_operation_ids" t-as="l">
        <td style="border-bottom:0 none;border-right: 1px solid black;border-top: 0 none;padding: 0px 0px 0px 5px">1
        </td>
        <td style="border-right:1px solid black;border-top:0 none; padding: 0px 0px 0px 5px">2
        </td>
        <td style="border-bottom:0 none; border-top: 0 none; padding: 0px 0px 0px 5px">Description
        </td>
      </tr>
    </tbody>
  </table>
</div>

我需要边框来填充整个div（到底线），我不关心我将拥有的行数。

希望有人可以提前帮助，谢谢。

Answer 1

如果您确切知道列的宽度，则可以使用背景作为伪元素

div:after {
  position: absolute;
  bottom: 0;
  content: ''; left: 0; width: 100%;
  background: url('1px-height-with-dots-on-column-positions.png') 0 0 repeat-y;
}

Answer 2

你必须使用一点jquery or javascript。如果你已经熟悉它，那就太棒了。

同时提供td 身高：30px 并将border="1"添加到表格

检查下面的代码段。

$(function(){
var height = $(".main").height();
  height = parseInt(height / 25);
  for(var i = 0; i <= height; i++)
  {
    var newrow = '<tr t-foreach="o.pack_operation_ids" t-as="l"><td style="border-bottom:0 none;border-right: 1px solid black;padding: 0px 0px 0px 5px"></td><td style="border-right:1px solid black; padding: 0px 0px 0px 5px"></td><td style="border-bottom:0 none; padding: 0px 0px 0px 5px"></td></tr>';
    $("table tbody").append(newrow);
  }
});

td{
border-bottom:0 none;border-right:0px solid black;border-top: 1 solid black;padding: 0px 0px 0px 5px;
height:30px;
}

tr{
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main" style="height: 20cm">
  <table border="1" cellpadding="0" cellspacing="0" style="border-spacing:0;border-collapse:0;font-size:12px;width: 100%;text-transform:uppercase;">
    <thead>
      <tr style="font-weight:bold">
        <th style="width:9%;border-bottom:1px solid black;padding:6px;" align="center">cantidad</th>
        <th style="width:12%;border:1px solid black;border-top:0 none;padding:6px;" align="center">codigo</th>
        <th style="width:79%;border-bottom:1px solid black;padding:6px;align: center" align="center">descripcion</th>
      </tr>
    </thead>
    <tbody style="border-bottom: none;">
      <tr t-foreach="o.pack_operation_ids" t-as="l">
        <td style="border-bottom:0 none;border-right: 1px solid black;border-top: 0 none;padding: 0px 0px 0px 5px">1
        </td>
        <td style="border-right:1px solid black;border-top:0 none; padding: 0px 0px 0px 5px">2
        </td>
        <td style="border-bottom:0 none; border-top: 0 none; padding: 0px 0px 0px 5px">Description
        </td>
      </tr>
    </tbody>
  </table>
</div>