我不能并排放置两个桌子。我尝试使用负边距。如果我向左浮动，则当html页面转换为pdf时，它不会按预期显示。
html,body{
font-family: Arial;
font-size:12px;
margin:0;
height:297mm;
width:210mm;
}
.wrapper{
margin: 10px 0 10px 0;
}
.header{
width:100%;
height:100px;
}
.image{
float: left;
width:15%;
margin-left:5%;
height:100px;
width:100px;
}
.image img{
margin-top:10px;
height:99px;
width:99px;
}
.headline{
margin-top:15px;
font-size:30px;
font-weight:bold;
float: left;
width:100%;
text-align: center;
}
.tagline{
font-size:15px !important;
font-weight: regular;
font-style:italic;
margin-top: 5px;
}
.table_wrapper{
/*padding:0 5%;*/
border: 2px solid #000;
float:left;
margin:15px;
}
.student_info table{
width: 100%;
height: 100px;
/*float: left;*/
padding: 15px;
}
.student_info table,.student_info th,.student_info td,
.remark table,.remark th,.remark td
{
border: 0px solid #000 !important;
}
.subject{
width:150px;
margin-left: 20px;
text-align: left;
}
.score{
width:40px;
}
.remark{
margin-bottom:30px;
line-height:2;
}
.student_info table tr td img{
height:100px;
width:80px;
float: right;
}
.tag_bold{
font-weight: bold;
}
.chartz{
padding: 5px;
background-color: green;
}
.chartz table td{
height:14px;
}
.chartz table{
height:20px;
border-collapse: collapse;
}
.chartz table, th, td {
border: 1px solid black;
}
.txt_rotate{
/*-ms-transform: rotate(-90deg); *//* IE 9 */
/*-webkit-transform: rotate(-90deg);*/ /* Safari 3-8 */
/*transform: rotate(-90deg);*/
padding: 50px 0;
}
.mark_chart{
/*float:left;*/
padding-right: 10px;
width: 50%;
text-align:center;
font-weight:bold;
background-color: blue;
margin-right: -800px;
}
.txt_colr{
color: #5151FF;
}
.txt_colr_red{
color:red;
}
.txt_colr_green{
color: green;
}
.head_title{
font-size: 8px;
padding: 40px 0 !important;
}
.social_chart{
width: 20%;
margin-bottom: 5%;
background-color: red;
/*float: left;*/
margin-right: -800px;
}
.social{
padding:43px 0;
text-align:center;
}
.mark_chart table{
width:100%;
}
.social_chart table{
width:100%;
}
.habit_chart, .behaviour_chart, .class_chart{
padding: 0 0 20px 0;
}
.remark{
float: left;
margin-left:2%;
width:100%;
}
.remark table{
width:90%;
}
.footer{
width:100%;
text-align:center;
margin: 30px 0;
font-weight: bold;
}
@media all {
.page-break { display: block; page-break-before: always; }
}
@media print {
.page-break { display: block; page-break-before: always; }
} <div class="chartz">
<div class="mark_chart">
<table>
<tr style="font-weight: bold;"><td rowspan="2" class="head_title"><h1>SUBJECT TITLE</h1></td><td class="txt_rotate">1st Test</td><td class="txt_rotate">2nd Test</td><td class="txt_rotate">Exam Score</td><td class="txt_rotate">Total Score</td><td rowspan="2" class="txt_rotate">Letter Grade</td><td rowspan="2" class="txt_rotate">Subject Position</td><td class="head_title" rowspan="2"><h3>Remark</h3></td></tr>
<tr style="font-weight: bold;" ><td>10</td><td>20</td><td>70</td><td>100</td></tr>
<tr><td colspan="8">COGNITIVE REPORT</td></tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
</table>
</div>
<div class="social_chart">
<div class="habit_chart">
<table>
<tr class="tag_bold head_title">
<td colspan="2" class="social"> <strong>SOCIAL BEHAVIOUR AND<br> MANIPULATIVE SKILLS</strong> </td>
</tr>
<tr class="tag_bold"><td>Work Habit</td><td>Ratings</td></tr>
<tr><td>1. Creativity</td><td></td> </tr>
<tr><td>2. Industrious </td><td></td> </tr>
<tr><td>3. Work Independently</td><td></td> </tr>
<tr><td>4. Follow Instructions</td><td></td> </tr>
<tr><td>5. Neatness/Neat Work</td><td></td> </tr>
<tr><td>6. Handwriting</td><td></td> </tr>
<tr><td>7. Verbal Fluency</td><td></td> </tr>
<tr><td>8. Work with Supervision</td><td></td> </tr>
<tr><td>9. Class Participation</td><td></td> </tr>
<tr><td>10. Work on time</td><td></td> </tr>
</table>
</div>
<div class="behaviour_chart">
<table>
<tr class="tag_bold"><td>Behaviour</td><td>Ratings</td></tr>
<tr><td>1. Honesty</td><td></td> </tr>
<tr><td>2. Humility </td><td></td> </tr>
<tr><td>3. Self Control</td><td></td> </tr>
<tr><td>4. Politeness</td><td></td> </tr>
<tr><td>5. Teachers Respect</td><td></td> </tr>
<tr><td>6. Friendliness</td><td></td> </tr>
<tr><td>7. Punctuality</td><td></td> </tr>
</table>
</div>
<div class="class_chart">
<table>
<tr class="tag_bold"><td colspan="2">Class Average</td></tr>
<tr><td>Highest Class Average</td><td class="txt_colr_green">{{@$highAverage->average}}%</td> </tr>
<tr><td>Lowest Class Average</td><td class="txt_colr_red">{{@$lowAverage->average}}%</td> </tr>
</table>
</div>
<div class="resume_chart">
<table >
<tr class="tag_bold"><td colspan="2" style="text-align: center;">School Resumes</td></tr>
<tr><td colspan="2" style="text-align:center;">Sunday, 22 April, 2018</td> </tr>
</table>
</div>
</div>
</div>
答案 0 :(得分：1)
我不确定，但这可能是您正在寻找的解决方案
您必须增加主体的大小，并更改css中的浮点值以及边距
.wrapper{
margin: 10px 0 10px 0;
}
.header{
width:100%;
height:100px;
}
.image{
float: left;
width:15%;
margin-left:5%;
height:100px;
width:100px;
}
.image img{
margin-top:10px;
height:99px;
width:99px;
}
.headline{
margin-top:15px;
font-size:30px;
font-weight:bold;
float: left;
width:100%;
text-align: center;
}
.tagline{
font-size:15px !important;
font-weight: regular;
font-style:italic;
margin-top: 5px;
}
.table_wrapper{
/*padding:0 5%;*/
border: 2px solid #000;
float:left;
margin:15px;
}
.student_info table{
width: 100%;
height: 100px;
/*float: left;*/
padding: 15px;
}
.student_info table,.student_info th,.student_info td,
.remark table,.remark th,.remark td
{
border: 0px solid #000 !important;
}
.subject{
width:150px;
margin-left: 20px;
text-align: left;
}
.score{
width:40px;
}
.remark{
margin-bottom:30px;
line-height:2;
}
.student_info table tr td img{
height:100px;
width:80px;
float: right;
}
.tag_bold{
font-weight: bold;
}
.chartz{
padding: 5px;
width: 100%;
}
.chartz table td{
height:14px;
}
.chartz table{
height:20px;
border-collapse: collapse;
}
.chartz table, th, td {
border: 1px solid black;
}
.txt_rotate{
/*-ms-transform: rotate(-90deg); *//* IE 9 */
/*-webkit-transform: rotate(-90deg);*/ /* Safari 3-8 */
/*transform: rotate(-90deg);*/
padding: 50px 0;
}
.mark_chart{
/*float:left;*/
float: left;
width: 50%;
text-align:center;
font-weight:bold;
background-color: blue;
margin-right: -800px;
}
.txt_colr{
color: #5151FF;
}
.txt_colr_red{
color:red;
}
.txt_colr_green{
color: green;
}
.head_title{
font-size: 8px;
padding: 40px 0 !important;
}
.social_chart{
width: 50%;
margin-bottom: 5%;
background-color: red;
float: left;
margin-left: 50%;
}
.social{
padding:43px 0;
text-align:center;
}
.mark_chart table{
width:100%;
}
.social_chart table{
width:100%;
}
.habit_chart, .behaviour_chart, .class_chart{
padding: 0 0 20px 0;
}
.remark{
float: left;
margin-left:2%;
width:100%;
}
.remark table{
width:90%;
}
.footer{
width:100%;
text-align:center;
margin: 30px 0;
font-weight: bold;
}
@media all {
.page-break { display: block; page-break-before: always; }
}
@media print {
.page-break { display: block; page-break-before: always; }
}<html>
<head>
<style>
html,body{
font-family: Arial;
font-size:12px;
margin:0;
height:100%;
width:100%;
}
</style>
</head>
<body>
<div class="chartz">
<div class="mark_chart">
<table>
<tbody><tr style="font-weight: bold;"><td rowspan="2" class="head_title"><h1>SUBJECT TITLE</h1></td><td class="txt_rotate">1st Test</td><td class="txt_rotate">2nd Test</td><td class="txt_rotate">Exam Score</td><td class="txt_rotate">Total Score</td><td rowspan="2" class="txt_rotate">Letter Grade</td><td rowspan="2" class="txt_rotate">Subject Position</td><td class="head_title" rowspan="2"><h3>Remark</h3></td></tr>
<tr style="font-weight: bold;"><td>10</td><td>20</td><td>70</td><td>100</td></tr>
<tr><td colspan="8">COGNITIVE REPORT</td></tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
<tr>
<td class="subject"> </td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr"><strong> </strong></td>
<td class="txt_colr_green"><strong> </strong></td>
<td class="txt_colr_red"><strong> </strong></td>
</tr>
</tbody></table>
</div>
<div class="social_chart">
<div class="habit_chart">
<table>
<tbody><tr class="tag_bold head_title">
<td colspan="2" class="social"> <strong>SOCIAL BEHAVIOUR AND<br> MANIPULATIVE SKILLS</strong> </td>
</tr>
<tr class="tag_bold"><td>Work Habit</td><td>Ratings</td></tr>
<tr><td>1. Creativity</td><td></td> </tr>
<tr><td>2. Industrious </td><td></td> </tr>
<tr><td>3. Work Independently</td><td></td> </tr>
<tr><td>4. Follow Instructions</td><td></td> </tr>
<tr><td>5. Neatness/Neat Work</td><td></td> </tr>
<tr><td>6. Handwriting</td><td></td> </tr>
<tr><td>7. Verbal Fluency</td><td></td> </tr>
<tr><td>8. Work with Supervision</td><td></td> </tr>
<tr><td>9. Class Participation</td><td></td> </tr>
<tr><td>10. Work on time</td><td></td> </tr>
</tbody></table>
</div>
<div class="behaviour_chart">
<table>
<tbody><tr class="tag_bold"><td>Behaviour</td><td>Ratings</td></tr>
<tr><td>1. Honesty</td><td></td> </tr>
<tr><td>2. Humility </td><td></td> </tr>
<tr><td>3. Self Control</td><td></td> </tr>
<tr><td>4. Politeness</td><td></td> </tr>
<tr><td>5. Teachers Respect</td><td></td> </tr>
<tr><td>6. Friendliness</td><td></td> </tr>
<tr><td>7. Punctuality</td><td></td> </tr>
</tbody></table>
</div>
<div class="class_chart">
<table>
<tbody><tr class="tag_bold"><td colspan="2">Class Average</td></tr>
<tr><td>Highest Class Average</td><td class="txt_colr_green">{{@$highAverage->average}}%</td> </tr>
<tr><td>Lowest Class Average</td><td class="txt_colr_red">{{@$lowAverage->average}}%</td> </tr>
</tbody></table>
</div>
<div class="resume_chart">
<table>
<tbody><tr class="tag_bold"><td colspan="2" style="text-align: center;">School Resumes</td></tr>
<tr><td colspan="2" style="text-align:center;">Sunday, 22 April, 2018</td> </tr>
</tbody></table>
</div>
</div>
</div>
</body>
</html>
您的代码太大，无法阅读。
但是请确保您已正确构造表。
尝试使用波纹管结构，并在必要时应用CSS：）
<html>
<body>
<table border="1" cellspacing="0">
<tr>
<td>
<table border="1" cellspacing="0">
<tr>
<th>Table-1</th>
</tr>
<tr>
<td>td-1</td>
<td>td-2</td>
<td>td-3</td>
<td>td-4</td>
</tr>
<tr>
<td>td-5</td>
<td>td-6</td>
<td>td-7</td>
<td>td-8</td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0">
<tr>
<th>Table-2</th>
</tr>
<tr>
<td>td-1</td>
<td>td-</td>
<td>td-3</td>
<td>td-4</td>
</tr>
<tr>
<td>td-5</td>
<td>td-6</td>
<td>td-7</td>
<td>td-8</td>
</tr>
</table>
</td>
</tr>
<table>
</body>
</html>
答案 1 :(得分：0)
根据您的代码，
尝试将以下属性添加到class =“ chartz”
显示：flex;
这不仅会使桌子相互平行，而且还会调整高度。