1
文字と風景として印刷しようとしている間に、ページの幅全体を使用できるように、2つのdivは互いに整列しません。しかし、 "@ size a4 landscape"で印刷しようとすると、2つのdivが整列します。 印刷用CSSには何が表示されていないのですが、画面上と同じように整列させることができます。CSS風景の文字の印刷の整列
<style>
@media print {
.column-left {
float: left;
width: 30%;
}
.column-right {
float: right;
width: 30%;
}
.column-center {
display: inline-block;
width: 40%;
}
th.vendorListHeading {
background-color: #ec6619 !important;
-webkit-print-color-adjust: exact;
font-size: small;
width: inherit;
}
th.vendorListHeading1 {
background-color: #666666 !important;
-webkit-print-color-adjust: exact;
font-size: small;
}
thead.vendorListHeading2 {
background-color: #666666 !important;
-webkit-print-color-adjust: exact;
font-size: small;
}
td.forPrintingonlyfortd {
color: -internal-quirk-inherit;
font-size: small;
font-weight: normal;
font-variant: normal;
font-style: normal;
}
.StandardTable thead tr th {
background-color: #666666 !important;
-webkit-print-color-adjust: exact;
font-size: small;
}
@page {
size: letter landscape;
}
body {
height: 100%;
width: 100%;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 5px;
border: 1px solid #ec6619;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 3px;
}
.table>thead>tr>th {
padding: 3px;
}
.table-condensed>tbody>tr>td,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>td,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>thead>tr>th {
padding: 3px;
}
img {
width: 100%;
}
a[href]:after {
content: none;
}
td.forPrintingonlyforTd {
color: -internal-quirk-inherit;
font-size: small;
font-weight: normal;
font-variant: normal;
font-style: normal;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.col-md-6 {
float: left;
width: 50%;
}
}
</style><HTML>
<HEAD>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</HEAD>
<body>
<div class="container">
<table class="table" border="1">
<tr>
<td>
<table class="table" border="1">
<tr>
<th width="70%" bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="table" border="1">
<tr>
<td>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd">
Title
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<div class="container">
<div class="col-md-6">
<table class="table" border="1">
<tr>
<td>
<a href="" target="_blank"></a>
<img src="" alt="" />
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" class="vendorListHeading" align="left"><font color="FFFFFF">Title</font>
</th>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF"> Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF"> Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
<table class="table" border="1">
<tr>
<th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font>
</th>
</tr>
<tbody>
<tr>
<td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
おそらくばかげた質問ですが、まずソースのすべてのエラーを修正するのに役立ちますか？ –
リスター、あなたはどんなことを言っていますか？ – JqueryHelp
HTMLのエラー。 [W3Cバリデーター]（https://validator.w3.org）は8つのエラーと5つの警告を報告していますが、カラー値の欠落している '＃ 'もすべてカウントしません。自分のバリデーターを使って実行すると、HTMLモードでは36エラー、XHTMLモードでは44エラーが発生します。 –