Custom sales invoice

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<table>
    <thead><tr><td>
<body>
<table>
  <thead>
  <tr>
    <div style="margin-top: 190px;">
    </div>
  </tr>
  </thead>
</table>
<p style="margin-left: 355px; font-size: 20px;">الفاتورة
نقدية</p>
<table style=" width: 750px;height: 90px;" border="0">
  <tbody>
    <tr>
      <td
 style="text-align: right; font-size: 15px; font-weight: bold;">
      <span data-bind="text: Customer"></span></td>
    </tr>
    <tr>
      <td
 style="text-align: right; height: 33px; vertical-align: bottom; font-size: 12pt;">
      <div data-bind="foreach: CustomerAddressLines">
      <div data-bind="text: $data"></div>
      </div>
      </td>
    </tr>
    <tr>
      <td style="text-align: center; height: 70px;"></td>
      <td
 style="text-align: right; vertical-align: middle; width: 46%; font-size: 11pt;">
      <div data-bind="text: Number"></div>
      </td>
      <td style="width: 5%;">
      </td>
      <td
 style="text-align: center; vertical-align: middle; width: 100px; font-size: 11pt;">
      <span data-bind="text: IssueDate" style=""></span></td>
    </tr>
    <tr>
      <td style="text-align: left; vertical-align: top;">
      <div class="summary" data-bind="text: Summary"></div>
      </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<div style="margin-top: 35px;">

</tr><td></thead>

<!-- LINE ITEMS -->

<tbody><tr><td>

<table
 style="text-align: left; margin-left: auto; margin-right: 0px;"
 class="lineItems">
  <thead>
  <tr>
  </tr>
  </thead>
  <tbody data-bind="foreach: LineItems">
    <tr>
      <td style="text-align: right;"></td>
      <td data-bind="text: Description"
 style="text-align: right;"></td>
      <td data-bind="text: Qty" style="text-align: right;"></td>
      <td data-bind="text: UnitPrice"
 style="text-align: right;"></td>
      <td...

CSS

div.summary 
{
    font-size: 11pt;
    font-weight: bold;
}

table.lineItems 
{
font-size: 12pt;
font-weight: bold;
 width: 100%;
 margin-top: 20px
}
table.lineItems td.total-label 
{    
text-align: right;
    border-left: none;
}
table.lineItems td.total-important 
{
    font-size: 14pt;
    font-weight: bold;
}
table.lineItems tr.lastLineItem td
{
    border-bottom: 1px solid #7f7f7f
}
@media print
{
    #invoice-footer {
        width: 100%;
        display: block;
        position: fixed;
        bottom: 0;
@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}
margin-bottom: 65px;
    }
}
@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

JavaScript

ko.applyBindings({
    Seller: 'ACME Corporation',
    SellerContactDetails: ['1313 Webfoot Walk', 'Duckburg', 'Calisota'],
    DueDate: '24/07/2014',
    IssueDate: '27/06/2014',
    Number: '1001',
    Customer: 'Brilliant Industries',
    CustomerAddressLines: ['1 York Street', 'Metropolis'],
    Summary: 'Professional services',
    Notes: ['Please by due date.', 'Thank you for your business.'],
    LineItems: [{
        Description: ['Financial planning'],
        Qty: '4',
        UnitPrice: '100.00',
        Discount: '',
        Tax: 'VAT 10%',
        LineTotal: '400.00'
    }, {
        Description: ['Tax consulting'],
        Qty: '2',
        UnitPrice: '120.00',
        Discount: '',
        Tax: 'VAT 10%',
        LineTotal: '240.00'
    }],
    LineItemsIncludeTax: false,
    Subtotal: '640.00',
    TaxComponents: [{
        Name: 'VAT 10%',
        Amount: '64.00'
    }],
    Total: '704.00'
});