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

Question

我在我的页面中显示数据...如下图所示。

但是当我从浏览器点击打印预览时...此显示打印如下图像..

我需要在打印预览中像上面的图像一样并排显示两个表.plz帮助我......

下面是我的代码......

<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>

Answer 1

1. 使用media="all"
2. 将两个表的宽度减少到30％



<style type="text/css" media="all">
  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="30%" 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="30%" 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>

Answer 2

将media="screen"元素从style元素更改为media="all"，以便您的样式适用于所有媒体类型，包括打印。使用打印介质查询 @media print { /* print styles */ }，您可以仅定位打印介质类型并为其调整样式。

这里有w3c-spec for Media Queries。

<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>