文章/答案/技术大牛

发布

社区首页 >问答首页 >引导html中一个接一个的虚线。

问引导html中一个接一个的虚线。
EN

Stack Overflow用户

提问于 2018-11-26 07:06:36

回答 1查看 410关注 0票数 0

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

我试过一个接一个地使用两个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格式打印时，代码不应中断。

html

css

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-26 07:42:49

您可以添加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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53476156

复制

相似问题

问引导html中一个接一个的虚线。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导html中一个接一个的虚线。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导html中一个接一个的虚线。
EN