html - Bootstrap HTML中的两个虚线

我要两个接一个的虚线最小
休息空间或没有休息空间。

我已经尝试过一个接一个地使用两个tr，但这需要
巨大的空间。

我所做的如下：

https://jsfiddle.net/cra6g1mu/3/

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

我想做这样的事情：

我要添加两条虚线。在图中以红色标记显示。

任何帮助都将受到赞赏。

以pdf格式打印时，代码不应中断。

最佳答案

您可以添加div并像这样给css

.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;
      }
.twobord{
  border-top:1px dotted #e2e2e2;
  border-bottom:1px dotted #e2e2e2;
  height:5px;
  margin-top:55px;
}

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


<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 <div class="twobord"></div></td>
        <td class="noborder"> 27020.00 <div class="twobord"></div></td>
      </tr>
	<tr>
	</tr>
    </tbody>
  </table>


  <br><br><br><br><br>
  <br><br><br>
  <span style="float:right"> Authorised Signatory </span>