Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello evryone.
im making an application that generates invoices. The problem is that I want the price at the bottom.see the picture (I censored some date with red. the green box is what I want at the bottom of my page): picture of my invoice.
It should always be at the bottom even if there is only 1 item in the invoice. I also can't separate it into 2 tables. Because my client wants everything in 1 table. here is the code of the page. (I also censored some information here)

<!DOCTYPE html>
<html>
<head>
    <style>
        @page { margin: 100px 25px; }
        header { position: fixed; top: -60px; left: 0px; right: 0px; background-color: lightblue; height: 50px; }
        footer{ position: fixed; bottom: 60px; left: 0px; right: 0px; background-color: lightblue; height: 50px; }
        p:last-child { page-break-after: never; }
        table {
        border-collapse: collapse;
        }

        .info{
        float: right;
        border: 1px solid black;
        width: 40%;
        margin-bottom: 20px;
        }

        .customer{
        }

        tr, td{
            border: 1px solid black;
        }

        .company-name{
            font-size: 40px;
        }

        .items {
            width: 100%;
            padding-top: 20px;
            border: 1px solid black;
        }

        .items td{
            text-align: center;
        }

        .company-info{

        }
        .firstline th{
            border: 0;
        }
        .footer {
            width: 100%;
            border: 0;
            bottom: 0px;
        }
        .global.footer {
            position: fixed;
            width: 100%;
            border: 0;
            bottom: 0;
        }
        .footer th {
                border: 0;
        }

        .header td {
            text-decoration: underline;
        }

        p {
            line-height: 0.5;
        }

    </style>
</head>

<body>

    <img src="https://i.imgur.com/y6SBqHe.jpg" class="logo">

    <p id="company-name" class="company-name">CENSORED</p>

    <div class="info">
                {{$invoice->customerName}}
                {{$invoice->customerAdres}}
    </div>

    <div class="company-info">
        <p>CENSORED26</p>
        <p>CENSORED</p>
        <p>CENSORED</p>
        <p>CENSORED</p>
    </div>
    <table class="items">
        <tr id="firstline" class="firstline">
            <th id="invoicenumber">Factuur nr: {{$invoice->invoiceNumber}}</th>
            <th></th>
            <th></th>
            <th></th>
            <th id="date">Datum:</th>

        </tr>
        <thead>
            <tr id="0" class="header">
                <td>Artikel</td>
                <td>Beschrijving</td>
                <td>Aantal</td>
                <td>Eenheidpr</td>
                <td>Bedrag</td>
            </tr>
        </thead>
        <tbody>
            @forelse(json_decode($invoice->itemsjson) as $item)
            <tr>
                    <td>{{$item->name}}</td>
                    <td>{{$item->description}}</td>
                    <td>{{$item->amount}}</td>
                    <td>{{$item->price}}</td>
                    <td>{{$item->totalPrice}}</td>
            </tr>
            @empty
            <p>geen invoices gevonden</p>
            @endforelse
        </tbody>
        <tfoot class="global-footer">
            <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>Totaal:</td>
                    <td>{{$totalPrice}}</td>
            </tr>

            <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>BTW 21%</td>
                    <td>{{$BTW}} </td>
            </tr>

            <tr>
                    <td></td>
                    <td>Betalingsvoorwaarden: 30 dagen</td>
                    <td></td>
                    <td>Totaal incl</td>
                    <td>{{$totalPriceWithBTW}}</td>
            </tr>
        </tfoot>
    </table>

    <table class="footer">
        <tr>
            <th>CENSORED</th>
            <th>CENSORED</th>
            <th>CENSORED</th>
        </tr>
    </table>
</body>

</html>


What I have tried:

I tried putting a footer tag in my table but this is not possible because it will always generate an error. I also searched online for a solution but I could not find it.
Posted
Comments
MadMyche 11-Apr-20 13:29pm    
I don't know about it currently, but in the past it was often more successful to design for the XHTML or HTML 4 doctypes as opposed to HTML5.
If this is still the case.... TFOOT needs to be before TBODY.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900