html css代码打印预览两个表并排

我正在我的页面中显示数据…如下图所示

但当我从浏览器中单击“打印预览”时…此显示打印如下图所示

我需要显示两个表并排像上面的图片打印预览..请帮助我

下面是我的代码

<style type="text/css" media="screen">
table, td  { border-width: 1px; border-style: solid; border-collapse: collapse; padding: 15px; color: #000000; text-align: center; }

table.pos_fixed1 { float:left; top:30px; margin-left:120px; }

table.pos_fixed2 {  float:right; top:30px; margin-right:120px; }

</style>


<table  border="1px solid #666" summary="" width="40%" class="pos_fixed1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

<table  border="1px solid #666" summary="" width="40%" class="pos_fixed2">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>

表格，td{边框宽度：1px；边框样式：实心；边框折叠：折叠；填充：15px；颜色：#000000；文本对齐：居中；}
table.pos_fixed1{float:左；top:30px；margin left:120px；}
table.pos_fixed2{float:右；top:30px；margin right:120px；}
123
456
789
基础知识
DEF
GHI

使用

media=“all”

将两个表的宽度减少到30%

桌子
运输署{
边框宽度：1px；
边框样式：实心；
边界塌陷：塌陷；
填充：15px；
颜色：#000000；
文本对齐：居中；
}
表1.pos_fixed1{
浮动：左；
顶部：30px；
左边距：120像素；
}
表2.pos_fixed2{
浮动：对；
顶部：30px；
右边距：120px；
}
1.
2.
3.
4.
5.
6.
7.
8.
9
A.
B
C
D
E
F
G
H
我

将

media=“screen”

从

style

元素更改为

media=“all”

，使您的样式适用于所有媒体类型，包括打印。通过打印媒体查询

@media print{/*print styles*/}

，您可以只针对打印媒体类型并调整其样式

给你钱

表，td{
边框宽度：1px；
边框样式：实心；
边界塌陷：塌陷；
填充：15px；
颜色：#000000；
文本对齐：居中；
}
.pos_fixed 1{
浮动：左；
顶部：30px；
左边距：120像素；
}
.pos_fixed 2{
浮动：对；
顶部：30px；
右边距：120px；
}
@媒体印刷品{
.pos_fixed 1，
.pos_fixed 2{
保证金：0；
宽度：50%；
}
}

看看

@media print{

，即。

<style type="text/css" media="all">
  table, td {
    border-width: 1px;
    border-style: solid;
    border-collapse: collapse;
    padding: 15px;
    color: #000000;
    text-align: center;
  }

  .pos_fixed1 {
    float: left;
    top: 30px;
    margin-left: 120px;
  }

  .pos_fixed2 {
    float: right;
    top: 30px;
    margin-right: 120px;
  }

  @media print {
    .pos_fixed1,
    .pos_fixed2 {
      margin: 0;
      width: 50%;
    }
  }

</style>