0
簡単な証明書を印刷しようとしています。証明書のテキストはHTMLテーブルとしてレイアウトされています。 私はいくつかの簡単な問題を抱えています。 1）私がクロムで印刷しようとすると、テーブルへのCSSの変更は完全に無視されます。 2）私は一貫して印刷する方法を見つけ出すことができず、テキストは適切な場所の中央に配置されます。
3）テーブル全体を変換して縦向きに印刷する方法を見つけられません。背景を持つHTMLテーブル内にテキストを印刷する
私のCSSは次のようになります。
<table class="certContent" style="display: block">
<tbody >
<tr style="width: 800px !important">
<td class="smallText"> Valid From: {{vendor.dStartDate}}</td>
<td> </td>
<td> </td>
<td class="smallText">Valid Till: {{vendor.dEndDate}} </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<th colspan="4"> {{vendor.sBusinessnameLegal}}</th>
</tr>
<tr>
<th colspan="2">{{vendor.iSic1}}</th>
<th colspan="2">{{vendor.iSic2}}</th>
</tr>
<tr>
<td colspan="2">{{vendor.iSic3}}</td>
<td colspan="2">{{vendor.iSic4}}</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
</tbody>
</table>
ませダイス：
@media print {
/* show cover in print */
.cover {
display: block;
}
.dvCertWrapper {
}
.cert {
width: 1080px!important;
content: url('../Content/images/certificate.jpg');
margin-left: -210px;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
.certContent {
display: block;
margin-top: -680px;
/*margin-left: 60px;*/
width: 100%;
text-align: center;
}
.startDate {
display: block;
font-family: "Century Schoolbook" !important;
font-size: 20px;
font-style: normal;
margin-top: -170px;
margin-left: -102px;
position: absolute;
}
.endDate {
display: block;
font-family: "Century Schoolbook" !important;
font-size: 20px;
font-style: normal;
margin-top: -10px;
margin-right: -60px;
position: absolute;
}
/* hide other elements in print */
button {
display: none;
}
.smallText {
font-size: .8em;
width: 800px;
}
table {
border-collapse: collapse;
width: 1800px;
}
}
私の表デフは、このようになります。これまで私は次のように試しました。
<style>
html,
body {
height: 100%;
margin: 0;
}
.cover {
/* hidden cover */
display: none;
height: 100%;
width: 100%;
}
/* fills entire sheet of paper */
.cert {
display: block;
height: 974px;
width: 1366px;
background-image: url('../Content/images/certificate.jpg');
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
/* only apply when printing */
@media print {
/* show cover in print */
.cover {
display: block;
}
.cert {
width: 800px;
content: url('../Content/images/certificate.jpg');
margin-left: -160px;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
.certContent {
display: block;
font-family: "Century Schoolbook" !important;
font-size: 40px;
font-style: normal;
margin-top: -800px;
margin-left: 60px;
}
.leftDate {
display: block;
font-family: "Century Schoolbook" !important;
font-size: 40px;
font-style: normal;
margin-top: -10px;
margin-left: -60px;
}
/* hide other elements in print */
button {
display: none;
}
}
</style>
<button onclick="window.print()">print</button>
<div class="cover">COVERLETTER</div>
<div>
<div class="cert"></div>
<div class="certContent">My Business</div>
<div class="leftDate">01/01/1979</div>
</div>
まだ閉じていません。
私の背景イメージのサイズは834 x 595ピクセルです。リーガルペーパーで印刷しようとしています。
完成した画像は次のようになります。 （私はこのグラフィックのために謝罪する、私はデザイナーではない、ちょうど慈善事業に投げた）。
赤いボックスが、私は、サーバーのデータを表示したいと思いますどのように描いています。 アイデアや指針は非常に高く評価されます。ありがとう...