固定tbody高度表

Question

我有问题试图让表1看起来像表2使用CSS。我也注意到了增加的高度和水印图像不会在打印预览

表1

表2

Answer 1

在TBODY的末尾添加一行解决这个反映。

<table> 
    <thead> 
    <tr> 
     <th>S/N</th> 
     <th>Description of goods</th> 
     <th>QTY</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>Arch</td> 
     <td>7.92</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>White</td> 
     <td>3.96</td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    </tbody> 
</table> 



table { 
    border-collapse: collapse; 
} 

table, th, td { 
    border: 1px solid #000; 
} 
td { 
    border-top: 0; 
    border-bottom: 0; 
} 

table { 
    height: 150px; 
} 
tr:last-child { 
    height: 100%; 
} 

检查我的例子https://jsfiddle.net/moisesnandres/4py2m8aq/