固定高度的表格的列边框未延伸到底部

Charles Goodwin 发表于 Dev

查尔斯·古德温

我正在尝试生成一个HTML模板以精确匹配客户的需求。然后，使用flyingsaucer将此HTML模板转换为PDF 。

具体来说，我需要一个表格将其设置为页面上的高度。该表必须具有列，但标题上没有行。（嘿，别开枪，客户要！）

CSS：

        #invoice-table {
            border: 1px solid darkblue;
            border-spacing: 0;
            clear: both;
            margin: 2mm 0mm;
            height: 100mm;
            width: 100%;
        }
        #invoice-table th, td { border-left: 1px solid darkblue; }
        #invoice-table th:first-child, td:first-child { border-left: none; }
        #invoice-table th { border-bottom: 1px solid darkblue; }
        #invoice-table td { vertical-align: top; font-size: 8pt; }
        th { text-align: center; font-weight: normal; }
        .amount { text-align: right; }
        .invoice_line { height: 6mm; }
        .invoice_line td, .invoice_line th { padding: 1mm; }

和表：

    <table id="invoice-table">
        <colgroup>
            <col width="35mm" />
            <col />
            <col width="20mm" />
            <col width="20mm" />
            <col width="20mm" />
        </colgroup>
        <tr class="invoice_line">
            <th>Rate Class</th>
            <th>Rate and Driver Details</th>
            <th>Item/s</th>
            <th>Rate</th>
            <th>Amount</th>
        </tr>
        <tr class="invoice_line">
            <td>Drivers</td>
            <td class="site">Charges for the provision of temporary resources (supply of driver/s)
                week ending 12th Oct 2013 for Getty Museum</td>
            <td class="amount">1</td>
            <td class="amount">&pound;341.63</td>
            <td class="amount">&pound;341.63</td>
        </tr>
        <tr class="invoice_line">
            <td>Drivers</td>
            <td class="site">Charges for the provision of temporary resources (supply of driver/s)
                week ending 12th Oct 2013 for Staples Center</td>
            <td class="amount">1</td>
            <td class="amount">&pound;330.00</td>
            <td class="amount">&pound;330.00</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

这可行！几乎... ！！！

使用飞碟R8，几乎可以产生所需的效果。但是，表格底部有一个空隙（请参见下面的屏幕截图）。我正在努力消除这种差距。

在此处输入图片说明

差距不会出现在浏览器上。这是飞碟虫还是我遗漏了一些东西？还是有更好的方法达到相同的效果？

查尔斯·古德温

我前一段时间设法解决了这个问题。查看CSS，解决方案似乎是设置border-collapse或box-sizing或两者兼而有之。

        #invoice-table {
            border: 0.5pt solid darkblue;
            border-collapse: collapse;
            border-spacing: 0;
            box-sizing: border-box;
            clear: both;
            margin: 2mm 0mm;
            height: 100mm;
            width: 100%;
        }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。