列邊框填滿整個表，即使沒有足夠的數據

Question

林做一個動態表，我不知道有多少TRS我將有：

<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>