Skip to content

Instantly share code, notes, and snippets.

@grgbrasil

grgbrasil/estilo-cupom-fiscal.markdown

Created October 16, 2021 17:27
Show Gist options
  • Save grgbrasil/a69136b0c8c0a4dbc6ea7a7f6e83cbdd to your computer and use it in GitHub Desktop.
Save grgbrasil/a69136b0c8c0a4dbc6ea7a7f6e83cbdd to your computer and use it in GitHub Desktop.
Download ZIP
estilo cupom fiscal
Raw
index.html
<body>
<div style="margin-top:20px">
<table class="printer-ticket">
<thead>
<tr>
<th class="title" colspan="3">Victor Shop</th>
</tr>
<tr>
<th colspan="3">17/11/2015 - 11:57:52</th>
</tr>
<tr>
<th colspan="3">
Nome do cliente <br />
000.000.000-00
</th>
</tr>
<tr>
<th class="ttu" colspan="3">
<b>Cupom não fiscal</b>
</th>
</tr>
</thead>
<tbody>
<tr class="top">
<td colspan="3">Doce de brigadeiro</td>
</tr>
<tr>
<td>R$7,99</td>
<td>2.0</td>
<td>R$15,98</td>
</tr>
<tr>
<td colspan="3">Opcional Adicicional: grande</td>
</tr>
<tr>
<td>R$0,33</td>
<td>2.0</td>
<td>R$0,66</td>
</tr>
</tbody>
<tfoot>
<tr class="sup ttu p--0">
<td colspan="3">
<b>Totais</b>
</td>
</tr>
<tr class="ttu">
<td colspan="2">Sub-total</td>
<td align="right">R$43,60</td>
</tr>
<tr class="ttu">
<td colspan="2">Taxa de serviço</td>
<td align="right">R$4,60</td>
</tr>
<tr class="ttu">
<td colspan="2">Desconto</td>
<td align="right">5,00%</td>
</tr>
<tr class="ttu">
<td colspan="2">Total</td>
<td align="right">R$45,56</td>
</tr>
<tr class="sup ttu p--0">
<td colspan="3">
<b>Pagamentos</b>
</td>
</tr>
<tr class="ttu">
<td colspan="2">Voucher</td>
<td align="right">R$10,00</td>
</tr>
<tr class="ttu">
<td colspan="2">Dinheiro</td>
<td align="right">R$10,00</td>
</tr>
<tr class="ttu">
<td colspan="2">Total pago</td>
<td align="right">R$10,00</td>
</tr>
<tr class="ttu">
<td colspan="2">Troco</td>
<td align="right">R$0,44</td>
</tr>
<tr class="sup">
<td colspan="3" align="center">
<b>Pedido:</b>
</td>
</tr>
<tr class="sup">
<td colspan="3" align="center">
www.site.com
</td>
</tr>
</tfoot>
</table>
</div>
</body>
Raw
style.css
.text-center {
text-align: center;
}
.ttu {
text-transform: uppercase;
}
.printer-ticket {
padding:10px;
margin-left: auto;
margin-right: auto;
background: #ffffe0;
display: table !important;
width: 100%;
max-width: 400px;
font-weight: light;
line-height: 1.3em;
}
.printer-ticket,
.printer-ticket * {
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
}
.printer-ticket th:nth-child(2),
.printer-ticket td:nth-child(2) {
width: 50px;
}
.printer-ticket th:nth-child(3),
.printer-ticket td:nth-child(3) {
width: 90px;
text-align: right;
}
.printer-ticket th {
font-weight: inherit;
padding: 10px 0;
text-align: center;
border-bottom: 1px dashed #BCBCBC;
}
.printer-ticket tbody tr:last-child td {
padding-bottom: 10px;
}
.printer-ticket tfoot .sup td {
padding: 10px 0;
border-top: 1px dashed #BCBCBC;
}
.printer-ticket tfoot .sup.p--0 td {
padding-bottom: 0;
}
.printer-ticket .title {
font-size: 1.5em;
padding: 15px 0;
}
.printer-ticket .top td {
padding-top: 10px;
}
.printer-ticket .last td {
padding-bottom: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment