Custom Printer into small second screen and split table/div?

V5 Question
1

I have second screen which having small 1280x768 resolution which having display from SambaPOS customprinter-browserprinter html, the following is the original printer template working for small list of item :

[LAYOUT]
<html>
<head>
<title>Test</title>
</head>

<body style="margin:0px; padding:0px; display:block ;background-color:#000000">
<center>
<div style="width:99%; font-size:30px; position:absolute; top:0px; left:0px; background:#000000; color:#FFFFFF; margin:0px;">
Date: {TICKET DATE}
</div>
<div style="width:99%; font-size:30px; position:absolute; top:30px; left:0px; background:#000000; color:#FFFFFF; margin:0px;">
Time: {TIME}
</div>
<div style="width:99%; font-size:30px; position:absolute; top:60px; left:0px; background:#000000; color:#FFFFFF; margin:0px;">
Server: {USER NAME}
</div>
<div style="width:99%; font-size:30px; position:absolute; top:90px; left:0px; background:#000000; color:#FFFFFF; margin:0px;">
Table: {ENTITY NAME:Table}
</div>
[<div style="width:99%; font-size:30px; position:absolute; top:120px; left:0px; background:#6C9A33; color:#E8EEE1; margin:0px;">
Member: {ENTITY NAME:Member}   Phone : {ENTITY DATA:Member:Phone}
</div>]
[<div style="width:99%; font-size:30px; position:absolute; top:150px; left:0px; background:#6C9A33; color:#E8EEE1; margin:0px;">
Gift Certificate: {ENTITY NAME:Gift Certificate} Balance: Rp {CALL:str.sumpad('left',13,' ','{ENTITY BALANCE:Gift Certificate}')}
</div>]
<div style="width:99%; font-size:50px; position:absolute; top:140px; left:0px; background:red; color:#FFFFFF; margin:0px;">
Total: Rp {TICKET TOTAL}
</div>
</center>
<div style="width:99%; margin:0px; margin-top:190px;">&nbsp;</div>
<div id="orders" style="background:#EEEEEE; width:99%; margin:0px; font-size:16px; font-family:calibri">{ORDERS}</div>
<div id="orders" style="background:#EEEEEE; width:99%; margin:0px; font-size:16px; font-family:calibri">{DISCOUNTS}</div>
<div id="orders" style="background:#EEEEEE; width:99%; margin:0px; font-size:16px; font-family:calibri"><center>Payments</center></div>
<div id="orders" style="background:#EEEEEE; width:99%; margin:0px; font-size:16px; font-family:calibri">{PAYMENTS}</div>
</body>
</html>

[DISCOUNTS]
<EB>
<div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
  <div id="discountname" style="width:50%; display:inline-block; overflow:hidden; vertical-align:middle">{CALCULATION NAME} %{CALCULATION AMOUNT}</div>
  <div id="discounttotal" style="width:43.3%; display:inline-block; text-align:right; vertical-align:middle">Rp [=F(-1*TN('{CALCULATION TOTAL}'))]</div>
</div>

[PAYMENTS]
<EB>
<div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
  <div id="discountname" style="width:50%; display:inline-block; overflow:hidden; vertical-align:middle">{PAYMENT NAME}</div>
  <div id="discounttotal" style="width:43.3%; display:inline-block; text-align:right; vertical-align:middle">Rp {CALL:str.pad('{PAYMENT AMOUNT}','left',13," ")}</div>
</div>

[ORDERS]
<center>
<EB>
<div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
  <!-- <div id="prodimg" style="width:15%; display:inline-block; vertical-align:middle"><img src="[='{ITEM TAG:ProdImage}' !='' ? '{ITEM TAG:ProdImage}' : 'C:/Users/Este/Documents/SambaPOS5/Web/no-image.jpg']">&nbsp;</div> -->
  <div id="prodqty" style="width:5%; display:inline-block; vertical-align:middle">{QUANTITY}</div>
  <div id="prodname" style="width:45%; display:inline-block; overflow:hidden; vertical-align:middle">{NAME}</div>
  <div id="prodprice" style="width:13%; display:inline-block; text-align:right; vertical-align:middle">Rp {PRICE}</div>
  <div id="prodamount" style="width:15%; display:inline-block; text-align:right; vertical-align:middle">Rp {TOTAL AMOUNT}</div>
</div>
<DB>
<div style="width:99%; text-align:left; font-size:10px;">{SORTED ORDER TAGS}</div>
</center>


[ORDERS:Void]
<EB>
<div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
  <!-- <div id="prodimg" style="width:15%; display:inline-block; vertical-align:middle"><img src="[='{ITEM TAG:ProdImage}' !='' ? '{ITEM TAG:ProdImage}' : 'C:/Users/Este/Documents/SambaPOS5/Web/no-image.jpg']">&nbsp;</div> -->
  <div id="prodqty" style="width:5%; display:inline-block; vertical-align:middle">{QUANTITY}</div>
  <div id="prodname" style="width:45%; display:inline-block; overflow:hidden; vertical-align:middle">{NAME}</div>
  <div id="prodprice" style="width:13%; display:inline-block; text-align:right; vertical-align:middle">Rp {PRICE}</div>
  <div id="prodamount" style="width:15%; display:inline-block; text-align:right; vertical-align:middle">**VOID**</div>
</div>
<DB>
<div style="width:99%; text-align:left; font-size:10px;">{SORTED ORDER TAGS}</div>

[ORDERS:Gift]
-- Format for gifted orders
<EB>
<div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
  <!--  <div id="prodimg" style="width:15%; display:inline-block; vertical-align:middle"><img src="[='{ITEM TAG:ProdImage}' !='' ? '{ITEM TAG:ProdImage}' : 'C:/Users/Este/Documents/SambaPOS5/Web/no-image.jpg']">&nbsp;</div> -->
  <div id="prodqty" style="width:5%; display:inline-block; vertical-align:middle">{QUANTITY}</div>
  <div id="prodname" style="width:45%; display:inline-block; overflow:hidden; vertical-align:middle">{NAME}</div>
  <div id="prodprice" style="width:13%; display:inline-block; text-align:right; vertical-align:middle">Rp {PRICE}</div>
  <div id="prodamount" style="width:15%; display:inline-block; text-align:right; vertical-align:middle">**GIFT**</div>
</div>
<DB>
<div style="width:99%; text-align:left; font-size:10px;">{SORTED ORDER TAGS}</div>

[SORTED ORDER TAGS]
<div id="ordertags" style="width:99%; color:#0000FF">
    <div style="width:15%; display:inline-block; vertical-align:middle">&nbsp;</div>
    <div style="width:1%; display:inline-block; padding-left:35px; padding-right:3px; vertical-align:middle">{ORDER TAG QUANTITY}</div>
    <div style="width:35%; display:inline-block; overflow:hidden; vertical-align:middle">{ORDER TAG NAME}</div>
    <div style="width:1%; display:inline-block; vertical-align:middle">Rp {ORDER TAG PRICE}</div>
    <div style="width:15%; display:inline-block; text-align:right; vertical-align:middle">Rp [=F(TN('{ORDER TAG QUANTITY}')*TN('{ORDER TAG PRICE}'))]</div>
</div>

[SORTED ORDER TAGS GROUP|OTS]

[SORTED ORDER TAGS GROUP:OTS]
<div id="ordertags" style="width:99%; color:#0000FF">
    <div style="width:15%; display:inline-block; vertical-align:middle">&nbsp;</div>
    <div style="width:60%; display:inline-block; padding-left:35px; padding-right:3px; vertical-align:middle">~~~ ON-THE SIDE ~~~</div>
</div>

The question is how to automatically divide into two seperate table in the same page if the orders item is more than 768 height?, what i’ve meant is i need to display only 1 table in the same page if the table row is only below 768 but divide automatically into 2 table in the same page/screen if it’s more than 768 height.

Currently i have modified it into the following :

[LAYOUT]
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.row {
  margin-left:-5px;
  margin-right:-5px;
}
  
.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
<title>Test</title>
</head>

<body style="margin:0px; padding:0px; display:block ;background-color:#000000">
<center>
<div style="width:99%; font-size:30px; position:absolute; top:0px; left:0px; background:#000000; color:#FFFFFF; margin:0px;">
Date: {TICKET DATE}
</div>
<div style="width:99%; font-size:30px; position:absolute; top:30px; left:0px; background:#000000; color:#FFFFFF; margin:0px;">
Time: {TIME}
</div>
<div style="width:99%; font-size:30px; position:absolute; top:60px; left:0px; background:#000000; color:#FFFFFF; margin:0px;">
Server: {USER NAME}
</div>
<div style="width:99%; font-size:30px; position:absolute; top:90px; left:0px; background:#000000; color:#FFFFFF; margin:0px;">
Table: {ENTITY NAME:Table}
</div>
[<div style="width:99%; font-size:30px; position:absolute; top:120px; left:0px; background:#6C9A33; color:#E8EEE1; margin:0px;">
Member: {ENTITY NAME:Member}   Phone : {ENTITY DATA:Member:Phone}
</div>]
[<div style="width:99%; font-size:30px; position:absolute; top:150px; left:0px; background:#6C9A33; color:#E8EEE1; margin:0px;">
Gift Certificate: {ENTITY NAME:Gift Certificate} Balance: Rp {CALL:str.sumpad('left',13,' ','{ENTITY BALANCE:Gift Certificate}')}
</div>]
<div style="width:99%; font-size:50px; position:absolute; top:140px; left:0px; background:red; color:#FFFFFF; margin:0px;">
Total: Rp {TICKET TOTAL}
</div>
</center>
<div style="width:99%; margin:0px; margin-top:190px;">&nbsp;</div>
<div id="orders" style="background:#EEEEEE; width:99%; margin:0px; font-size:16px; font-family:calibri">{ORDERS}</div>
<div id="orders" style="background:#EEEEEE; width:99%; margin:0px; font-size:16px; font-family:calibri">{DISCOUNTS}</div>
<div id="orders" style="background:#EEEEEE; width:99%; margin:0px; font-size:16px; font-family:calibri"><center>Payments</center></div>
<div id="orders" style="background:#EEEEEE; width:99%; margin:0px; font-size:16px; font-family:calibri">{PAYMENTS}</div>
</body>
</html>

[DISCOUNTS]
<EB>
<div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
  <div id="discountname" style="width:50%; display:inline-block; overflow:hidden; vertical-align:middle">{CALCULATION NAME} %{CALCULATION AMOUNT}</div>
  <div id="discounttotal" style="width:43.3%; display:inline-block; text-align:right; vertical-align:middle">Rp [=F(-1*TN('{CALCULATION TOTAL}'))]</div>
</div>

[PAYMENTS]
<EB>
<div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
  <div id="discountname" style="width:50%; display:inline-block; overflow:hidden; vertical-align:middle">{PAYMENT NAME}</div>
  <div id="discounttotal" style="width:43.3%; display:inline-block; text-align:right; vertical-align:middle">Rp {CALL:str.pad('{PAYMENT AMOUNT}','left',13," ")}</div>
</div>

[ORDERS]
<center>
<EB>
<div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
<div class="row">
  <div class="column">
    <table>
      <tr>
        <th>Jumlah</th>
        <th>Nama Produk</th>
        <th>Harga Produk Satuan</th>
        <th>Total Harga</th>
      </tr>
      <tr>
        <td>{QUANTITY}</td>
        <td>{NAME}</td>
        <td>Rp {PRICE}</td>
		<td>Rp {TOTAL AMOUNT}</td>
		<div style="width:99%; text-align:left; font-size:10px;">{SORTED ORDER TAGS}</div>
      </tr>
    </table>
  </div>
</div>
  <!-- <div id="prodimg" style="width:15%; display:inline-block; vertical-align:middle"><img src="[='{ITEM TAG:ProdImage}' !='' ? '{ITEM TAG:ProdImage}' : 'C:/Users/Este/Documents/SambaPOS5/Web/no-image.jpg']">&nbsp;</div>
  <div id="prodqty" style="width:5%; display:inline-block; vertical-align:middle">{QUANTITY}</div>
  <div id="prodname" style="width:45%; display:inline-block; overflow:hidden; vertical-align:middle">{NAME}</div>
  <div id="prodprice" style="width:13%; display:inline-block; text-align:right; vertical-align:middle">Rp {PRICE}</div>
  <div id="prodamount" style="width:15%; display:inline-block; text-align:right; vertical-align:middle">Rp {TOTAL AMOUNT}</div> -->
</div>
<DB>
</center>


[ORDERS:Void]
<EB>
<div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
  <!-- <div id="prodimg" style="width:15%; display:inline-block; vertical-align:middle"><img src="[='{ITEM TAG:ProdImage}' !='' ? '{ITEM TAG:ProdImage}' : 'C:/Users/Este/Documents/SambaPOS5/Web/no-image.jpg']">&nbsp;</div> -->
  <div id="prodqty" style="width:5%; display:inline-block; vertical-align:middle">{QUANTITY}</div>
  <div id="prodname" style="width:45%; display:inline-block; overflow:hidden; vertical-align:middle">{NAME}</div>
  <div id="prodprice" style="width:13%; display:inline-block; text-align:right; vertical-align:middle">Rp {PRICE}</div>
  <div id="prodamount" style="width:15%; display:inline-block; text-align:right; vertical-align:middle">**VOID**</div>
</div>
<DB>
<div style="width:99%; text-align:left; font-size:10px;">{SORTED ORDER TAGS}</div>

[ORDERS:Gift]
-- Format for gifted orders
<EB>
<div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
  <!--  <div id="prodimg" style="width:15%; display:inline-block; vertical-align:middle"><img src="[='{ITEM TAG:ProdImage}' !='' ? '{ITEM TAG:ProdImage}' : 'C:/Users/Este/Documents/SambaPOS5/Web/no-image.jpg']">&nbsp;</div> -->
  <div id="prodqty" style="width:5%; display:inline-block; vertical-align:middle">{QUANTITY}</div>
  <div id="prodname" style="width:45%; display:inline-block; overflow:hidden; vertical-align:middle">{NAME}</div>
  <div id="prodprice" style="width:13%; display:inline-block; text-align:right; vertical-align:middle">Rp {PRICE}</div>
  <div id="prodamount" style="width:15%; display:inline-block; text-align:right; vertical-align:middle">**GIFT**</div>
</div>
<DB>
<div style="width:99%; text-align:left; font-size:10px;">{SORTED ORDER TAGS}</div>

[SORTED ORDER TAGS]
<div id="ordertags" style="width:99%; color:#0000FF">
    <div style="width:15%; display:inline-block; vertical-align:middle">&nbsp;</div>
    <div style="width:1%; display:inline-block; padding-left:35px; padding-right:3px; vertical-align:middle">{ORDER TAG QUANTITY}</div>
    <div style="width:35%; display:inline-block; overflow:hidden; vertical-align:middle">{ORDER TAG NAME}</div>
    <div style="width:1%; display:inline-block; vertical-align:middle">Rp {ORDER TAG PRICE}</div>
    <div style="width:15%; display:inline-block; text-align:right; vertical-align:middle">Rp [=F(TN('{ORDER TAG QUANTITY}')*TN('{ORDER TAG PRICE}'))]</div>
</div>

[SORTED ORDER TAGS GROUP|OTS]

[SORTED ORDER TAGS GROUP:OTS]
<div id="ordertags" style="width:99%; color:#0000FF">
    <div style="width:15%; display:inline-block; vertical-align:middle">&nbsp;</div>
    <div style="width:60%; display:inline-block; padding-left:35px; padding-right:3px; vertical-align:middle">~~~ ON-THE SIDE ~~~</div>
</div>

But still doesn’t automatically dividing it into two table in the same page.