80mm Thermal Printing

8

@AMM check the below code.

<table style="background-color: #FFFFFF: width: 404px; color: #000000; text-transform: UPPERCASE\lowercase ;font-size:18px">
{% assign description = null %}
{% assign qty = null %}
{% assign unit price = null %}
{% assign amount = null %}
<thead>
  <tr>
    <td>
     <div style="text-align: center; width: 404px; word-wrap: break-word; margin-top: 10; margin-bottom: 10px">
        <div style="font-size: 30px; font-weight: bold; margin: 5px 0 10px 0">{{ business.name }}</div>
         <div>{{ business.address | replace: "\n", " " }}</div>
         <div style="border: 1px solid #000; width: 404px; height: 1px"></div>
        <div style="font-weight: bold; margin-top: 5px">Customer:<span style="font-weight: normal">{{ recipient.name }}</span></div>
 <tr>
   <td>
       <div style="text-align: left; width: 404px; word-wrap: break-word; margin-bottom: 5px">
        {% for field in fields %}
       <div style="display: inline-block">
        <div style="font-weight: bold; float: left; margin-right: 1px">{{ field.label }}: </div>
        <div style="float:left; margin-bottom: 5px; margin-right: 1px">{{ field.text }}</div>
      </div>
      {% endfor %}
    </td>
   <tr>
  <div style="width: 404px; word-wrap: break-word; margin-bottom: 10px">
    <div style="max-width: 100%; margin: 0 auto">

    </div>
    <td style="font-weight: bold; color: #000000; width: inherit; margin: 0 auto;">
      <div style="width: 404px;">
      <div style="border: 1px solid #000; width: 404px; height:1px"></div>
       {% for column in table.columns %}
            {% case column.label %}
                {% when 'Description' %}
                    {% assign description = forloop.index0 %}
                    <span style="padding-left: 0px; display: block; text-align: left; word-wrap: break-word; width: 35%; float:left">{{ column.label }}</span>
                {% when 'Qty' %}
                    {% assign qty = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 15%; float:left">{{ column.label }}</span>
                {% when 'Unit price' %}
                    {% assign Unitprice = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 20%; float:left">Rate</span>
                {% when 'Total' or 'Amount' %}
                    {% assign amount = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 30%; float:left">Amount</span>
            {% endcase %}
        {% endfor %}
      </div>
    </td>
    </div>
   </tr>
 </thead>
 <tbody>
{% for row in table.rows %}
<tr>
  <div style="width: 404px; word-wrap: break-word; margin: 0px 0px 20px 0px; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="color: #000000; padding-right: 0px; width: inherit; margin: 0 auto;">
        <div style="width: 404px">
        {% for cell in row.cells %}
            {% case forloop.index0 %}
                {% when description %}
                    <span style="padding-left: 2px; display: block; text-align: left; word-wrap: break-word; width: 35%; float:left">{{ cell.text | newline_to_br }}</span>
                {% when qty %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 15%; float:left">{{ cell.text }}</span>
                {% when Unitprice %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 20%; float:left">{{ cell.text }}</span>    
                {% when amount %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 30%; float:right">{{ cell.text }}</span>
            {% endcase %}
        {% endfor %}
        </div>
      </td>
    </div>
    </div>
   </tr>
   {% endfor %}
   {% for total in table.totals %}
  <tr>
  <div style="width: 404px; word-wrap: break-word; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="font-weight: bold; font-size: 20px">
        <div style="width: 404px">
          <span style="text-align: left; display: block; float:left; width: 70%; margin-top: 20px; margin-bottom: 15px;">{{ total.label }}:</span>
          <span style="text-align: right; display: block; float:left; width: 30%; margin-top: 20px; margin-bottom: 15px;">{{ total.text }}</span>
        </div>
      </td>
    </div>
  </div>
</tr>
{% endfor %}
<tr>
  <div style="width: 404px; word-wrap: break-word; margin-bottom: 20px">
    <div style="max-width: 100%; margin: 15px auto 0 auto">
      <td>
        <div style="padding-left: 2px; width: 404px; word-wrap: break-word">
          {% for field in custom_fields %}
          <div style="font-weight: bold; margin-top: 15px">{{ field.label }}</div>
          <div style="padding-bottom: 20px; margin-top: 15px">{{ field.text | newline_to_br }}</div>
          {% endfor %}
        </div>
      </td>
      </div>
    </div>
</tr>
<tr>
  <div style="width: 404px; word-wrap: break-word; margin: 0px 0px 8px 0px">
    <div style="max-width: 100%; margin: 15px auto 15px auto">
      <td>
        <div style="padding-left: 1px; width: 353px; word-wrap: break-word; text-align: center">
         <div style="border: 1px solid #000; width: 404px; height:1px"></div>   
          <p><b>Solution By:- Manager.IO
2 Likes