Spalte Grenzen die gesamte Tabelle, auch wenn nicht genügend Daten

Question

Im Herstellung einer dynamischen Tabelle zu füllen und ich weiß nicht, wie viele trs i haben:

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

Thing ist, dass ich die Grenzen benötige, um das gesamte div zu füllen (zur untersten Zeile), interessiere ich mich nicht für die Mengen von Reihen, die ich haben werde.

Hoffe jemand kann helfen, danke im Voraus.

Answer 1

Wenn Sie genau die Breite der Spalten kennen, können Sie Hintergrund für Pseudo-Element verwenden

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

Sie haben ein wenig jquery or javascript dafür zu verwenden. Wenn Sie bereits damit vertraut sind, wird es großartig. 30px und fügen border="1" Tabelle

prüfen unten Schnipsel:

Auch tdHöhe geben.

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