在2列中显示动态表以进行打印输出

时间:2017-02-06 16:03:03

标签: html css printing html-table

我有一个动态生成的表。它显示了某些员工在特定时期内所做的工作,每项工作都是一个新行,每个工作共有4列,时间信息等等。所以数据看起来像

Worker1
邮件服务| 2h | 3 $ | 6 $
电话呼叫| 1.4h | 2 $ | 2.8 $

Worker2
邮件服务| 4h | 3 $ | 12 $
存储| 11h | 8 $ | 88 $

Worker3
电话呼叫| 23小时| 3 $ | 69 $

等等。每个工作人员的行数会有所不同,具体取决于他/她在时间范围内所做的工作。对于给定时间范围内的工人数量也是如此。所以我最终得到了一个充满数据的漂亮表,在屏幕上看起来很棒。但现在我需要打印出来,为了节省纸张,它必须分为2列(横向格式),就像这样

Worker 1           worker3
....               ....

worker2            worker4
....               ....

我不知道在继续下一页之前如何将表格包装到页面的第二列。分页等是很清楚的。

任何帮助都将不胜感激。

编辑:这是迄今为止生成的HTML代码(虽然没有异国情调):

<div class="halfboxR" id="do-print" style="border:1px solid #000;"><table border="0" class="fontxsmall">
<tr><td class="fett lrgfont" colspan="4">AUSWERTUNG vom xx.yy.20zz bis xx.yy.20zz</td></tr>
    <tr class="fett">
    <td class="lrgfont">Employee 1</td>
    <td>von:  <br>bis: &nbsp;</td>
    <td> h</td>
    <td></td>
    </tr>
    <tr class="fett">
    <td>T&auml;tigkeit</td>
    <td>Wert &euro; (je)</td>
    <td>Anzahl</td>
    <td>Gesamt &euro;</td>
    </tr>
    <tr>
          <td>Kundenkontakte telefonisch</td>
          <td>xy</td>
          <td>192</td>
          <td>zz</td>
          </tr>
      <tr class="fett">
      <td colspan="2"></td>
      <td>Summe:</td>
      <td>zz &euro;</td>
      </tr>
      <tr class="fett">
      <td colspan="2"></td>
      <td>Soll:</td>
      <td></td>
      </tr>
      <tr><td colspan="4" style="border-bottom:1px solid #000;">&nbsp;</td></tr>

    <tr class="fett">
    <td class="lrgfont">Employee 2</td>
    <td>von:  <br>bis: &nbsp;</td>
    <td> h</td>
    <td></td>
    </tr>
    <tr class="fett">
    <td>T&auml;tigkeit</td>
    <td>Wert &euro; (je)</td>
    <td>Anzahl</td>
    <td>Gesamt &euro;</td>
    </tr>
    <tr>
        <td>Email allgemein</td>
        <td>xy</td>
        <td>99</td>
        <td>zz</td>
        </tr><tr>
        <td>Liefersperre</td>
        <td>xy</td>
        <td>34</td>
        <td>zz</td>
        </tr><tr>
        <td>abw. Lieferadresse / AP</td>
        <td>xy</td>
        <td>76</td>
        <td>zz</td>
        </tr><tr>
        <td>Packstation</td>
        <td>xy</td>
        <td>2</td>
        <td>zz</td>
        </tr><tr>
        <td>Dubletten</td>
        <td>xy</td>
        <td>130</td>
        <td>zz</td>
        </tr><tr>
        <td>Kundenbetreuung</td>
        <td>xy</td>
        <td>186</td>
        <td>zz</td>
        </tr><tr>
          <td>Kundenkontakte telefonisch</td>
          <td>xy</td>
          <td>518</td>
          <td>zz</td>
          </tr><tr>
          <td>Kundenkontakte telefonisch cmp2</td>
          <td>xy</td>
          <td>8</td>
          <td>zz</td>
          </tr><tr>
          <td>Kundenkontakte telefonisch cmp3</td>
          <td>xy</td>
          <td>17</td>
          <td>zz</td>
          </tr><tr>
          <td>Kundenkontakte telefonisch cmp4</td>
          <td>xy</td>
          <td>62</td>
          <td>zz</td>
          </tr>
      <tr class="fett">
      <td colspan="2"></td>
      <td>Summe:</td>
      <td>zz &euro;</td>
      </tr>
      <tr class="fett">
      <td colspan="2"></td>
      <td>Soll:</td>
      <td></td>
      </tr>
      <tr><td colspan="4" style="border-bottom:1px solid #000;">&nbsp;</td></tr>

    <tr class="fett">
    <td class="lrgfont">Employee 3</td>
    <td>von:  <br>bis: &nbsp;</td>
    <td> h</td>
    <td></td>
    </tr>
    <tr class="fett">
    <td>T&auml;tigkeit</td>
    <td>Wert &euro; (je)</td>
    <td>Anzahl</td>
    <td>Gesamt &euro;</td>
    </tr>
    <tr>
        <td>Auftrag</td>
        <td>xy</td>
        <td>1</td>
        <td>zz</td>
        </tr><tr>
        <td>Adress&auml;nderungen</td>
        <td>xy</td>
        <td>2</td>
        <td>zz</td>
        </tr><tr>
        <td>Email allgemein</td>
        <td>xy</td>
        <td>1</td>
        <td>zz</td>
        </tr><tr>
          <td>Kundenkontakte telefonisch</td>
          <td>xy</td>
          <td>7</td>
          <td>zz</td>
          </tr>
      <tr class="fett">
      <td colspan="2"></td>
      <td>Summe:</td>
      <td>zz &euro;</td>
      </tr>
      <tr class="fett">
      <td colspan="2"></td>
      <td>Soll:</td>
      <td></td>
      </tr>
      <tr><td colspan="4" style="border-bottom:1px solid #000;">&nbsp;</td></tr>

    <tr class="fett">
    <td class="lrgfont">Employee 4</td>
    <td>von:  <br>bis: &nbsp;</td>
    <td> h</td>
    <td></td>
    </tr>
    <tr class="fett">
    <td>T&auml;tigkeit</td>
    <td>Wert &euro; (je)</td>
    <td>Anzahl</td>
    <td>Gesamt &euro;</td>
    </tr>
    <tr>
        <td>Email allgemein</td>
        <td>xy</td>
        <td>23</td>
        <td>zz</td>
        </tr><tr>
          <td>Kundenkontakte telefonisch</td>
          <td>xy</td>
          <td>95</td>
          <td>zz</td>
          </tr>
      <tr class="fett">
      <td colspan="2"></td>
      <td>Summe:</td>
      <td>zz &euro;</td>
      </tr>
      <tr class="fett">
      <td colspan="2"></td>
      <td>Soll:</td>
      <td></td>
      </tr>
      <tr><td colspan="4" style="border-bottom:1px solid #000;">&nbsp;</td></tr>

    <tr class="fett">
    <td class="lrgfont">Employee 5</td>
    <td>von:  <br>bis: &nbsp;</td>
    <td> h</td>
    <td></td>
    </tr>
    <tr class="fett">
    <td>T&auml;tigkeit</td>
    <td>Wert &euro; (je)</td>
    <td>Anzahl</td>
    <td>Gesamt &euro;</td>
    </tr>
    <tr>
        <td>Angebote</td>
        <td>xy</td>
        <td>573</td>
        <td>zz</td>
        </tr><tr>
        <td>Email allgemein</td>
        <td>xy</td>
        <td>115</td>
        <td>zz</td>
        </tr>
      <tr class="fett">
      <td colspan="2"></td>
      <td>Summe:</td>
      <td>zz &euro;</td>
      </tr>
      <tr class="fett">
      <td colspan="2"></td>
      <td>Soll:</td>
      <td></td>
      </tr>
      <tr><td colspan="4" style="border-bottom:1px solid #000;">&nbsp;</td></tr>
      </table></div>

1 个答案:

答案 0 :(得分:0)

我建议将所有表放在外部div中,并在其上设置一些默认宽度。然后将表放在div中,使用显示样式:inline-block和一些宽度。然后他们应该包好。

您需要使用CSS中的@media查询来执行此操作,您可以在此处阅读:Media Queries

请注意,使用此方法,您可以在显示的页面上显示一列,并在打印页面上显示多列。