Is there a way to have two dashed lines one after the other, with minimal spacing or no space in between?
I attempted using two "tr" elements back to back, but it resulted in taking up a considerable amount of space.
Here is what I have tried:
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://allfont.net/allfont.css?fonts=dot-matrix" rel="stylesheet" type="text/css" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<h3 style="text-align:center">
AAAA DXXXXXXXX
</h3>
<P style="text-align:center">
YYYY, XXXX
</P>
<table style="width:100%">
<tr>
<td style="width: 50%;text-align: left;">
No. : 2
</td>
<td style="width: 50%;text-align: right;">
Dated : 3-Jul-2018
</td>
</tr>
</table>
<table class="table">
<thead>
<br><br><br>
<tr>
<th class="noborder ">Particulars</th>
<th class="noborder ">Debit</th>
<th class="noborder ">Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td class="noborder">
Loan to Member <span style="float:right">Dr</span><br>
Empl name 1<span style="float:right">7,1023819</span><br>
Empl name 2<span style="float:right">7,1023819</span><br>
Empl name 3<span style="float:right"> 7,1023819</span><br>
Empl name 4 <span style="float:right">7,1023819</span><br>
<br>
</td>
<td class="noborder">7,1023819</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder">Interest on Member's Loan<br>
<br><br><br><br><br><br><br><br>
</td>
<td class="noborder"></td>
<td class="noborder">27020.00<br>
<br><br><br><br><br><br><br><br></td>
</tr>
<tr>
<td class="noborder">On Account of: <br>
Being the amount of PF loan<br>
interest charge against<br>
Payment Voucher No:01,Date:03.07.18
</td>
<td class="noborder">27020.00</td>
<td class="noborder"> 27020.00</td>
</tr>
<tr>
</tr>
</tbody>
</table>
<br><br><br><br><br>
<br><br><br>
<span style="float:right"> Authorised Signatory </span>
<style>
.noborder{
border: none!important;
border-right: dotted 1px black !important;
}
.up-border {
border-top: dotted 1px black;
}
tr,td,thead,tbody {
font-family: 'Dot Matrix', arial;
text-shadow: 4px 4px 4px #aaa;
}
</style>
</html>
My goal is to achieve something similar to this image:
https://i.sstatic.net/MoT8B.png
I am looking for a solution to add two dotted lines as shown in the picture with a red mark.
Any assistance would be greatly appreciated.
- The code should not disrupt when printing to PDF.