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

<body>
<table>
  <thead>
  <tr>
    <div style="margin-top: 190px;">
    </div>
  </tr>
  </thead>
</table>
<p style="margin-left:350px;font-size:20px;">الفاتورة نقدية</p>
<table style="width: 1140px; height: 90px;" border="0">
  <tbody>
    <tr>
      <td style="text-align: right;" width="291">
      <span data-bind="text: Customer"></span></td>
    </tr>
    <tr>
      <td
 style="text-align: right; vertical-align: bottom; height: 33px;">
      <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%;">
      <div data-bind="text: Number"></div>
      </td>
      <td style="width: 5%;">
      </td>
      <td
 style="text-align: center; vertical-align: middle; width: 100px;">
      <span data-bind="text: IssueDate" style=""></span></td>
    </tr>
    <tr>
      <td colspan="1">
      <span style=""></span><!-- space for page no. is here--></td>
    </tr>
  </tbody>
</table>
<div style="margin-top: 35px;">
<!-- LINE ITEMS -->
<div class="summary" data-bind="text: Summary"></div>
<table class="lineItems">
  <thead>
  <tr>
  </tr>
  </thead>
  <tbody data-bind="foreach: LineItems">
    <tr>
      <td data-bind="text: Description"
 style="text-align: center;"></td>
      <td data-bind="text: Qty" style="text-align: center;"></td>
      <td data-bind="text: UnitPrice"
 style="text-align: right;"></td>
      <td data-bind="text: Discount"
 style="text-align: center;"></td>
      <td data-bind="text: Tax" style="text-align: center;"></td>
      <td data-bind="text: LineTotal"
 style="text-align: right;"></td>
    </tr>
  </tbody>
  <tbody>
    <tr class="lastLineItem">
     ...

CSS

div.summary 
{
    font-size: 11pt;
    font-weight: bold;
    margin-top: 20px
}

table.lineItems 
{
 width: 100%;
 margin-top: 20px
}
table.lineItems td.total-label 
{    
text-align: right;
    border-left: none;

}
table.lineItems td.total-amount
 {
    border: 0px solid #000;
    text-align: right
}
table.lineItems td.total-important 
{
    font-size: 14pt;
    font-weight: bold;
}
table.lineItems tr.lastLineItem td
{
    border-bottom: 1px solid #000
}

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'
});