为什么隐藏打印内容似乎调整了我的文档大小？

Question

我有一个问题＆amp;解决方案，但我想知道原因。我正在创建一个用于打印的表格。我在打印时隐藏了<th/>内的一些内容。当这样做时，整个页面的大小似乎都在增长。什么都不适合页面了。并不是<table/>的柱子在尺寸和尺寸上增大或缩小。 <table/>增长以容纳;这是整个网站的页面。

以下是代码的简化版本：

＆＃13;

＆＃13;

#tell_con > div {
  display: inline-block;
  padding: 1.54em .77em 0 .77em;
}
#tell_con thead {
  background-color: #666;
}
#tell_con tbody {
  background-color: #FFF;
}
#tell_con th,
#tell_con td {
  text-align: center;
  text-transform: inherit;
  text-decoration: none;
  padding: .231em 1.155em;
  border: 1px solid #333;
}
thead {
  background-color: #666;
  color: #FFF;
}
th {
  cursor: pointer;
  text-align: left;
  text-transform: uppercase;
  font-size: 95%;
  font-weight: normal;
  text-decoration: underline;
  padding: .539em .77em;
}
th > span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
}
tbody {
  table-layout: fixed;
  background-color: #E6E6FF;
  border: 1px solid #CCC;
}
tr {
  white-space: nowrap;
}
td {
  white-space: noramal;
  padding: .385em .77em;
  border-bottom: 1px solid #CCC;
}
tbody tr:nth-child(1) td {
  border-top: none;
}
td:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
@media print {
  /* This is the line of code that seems to cause the issue, other properties that caused the issue are the following: {font-size:0;} {width:0; height:0;} The fix to prevent the issue was {position:absolute; opacity:0;}. */
  th > span {
    display: none;
  }
  /* Code to change the Column Header */
  th[col_name="one"]:before {
    content: 'Col 1';
  }
  th[col_name="two"]:before {
    content: 'Col 2';
  }
  th[col_name="three"]:before {
    content: 'Col 3';
  }
  th[col_name="four"]:before {
    content: 'Col 4';
  }
  th[col_name="five"]:before {
    content: 'Col 5';
  }
  th[col_name="six"]:before {
    content: 'Col 6';
  }
  th[col_name="seven"]:before {
    content: 'Col 7';
  }
  th[col_name="eight"]:before {
    content: 'Col 8';
  }
  th[col_name="nine"]:before {
    content: 'Col 9';
  }
  th[col_name="ten"]:before {
    content: 'Col 10';
  }
}

＆＃13;

<div id='tell_con'>
  <div id='data_con_1'>
    <table cellspacing='0' cellpadding='0' border='0'>
      <thead>
        <tr>
          <th>0-30</th>
          <th>30-45</th>
          <th>46-60</th>
          <th>&gt;=61</th>
          <th>Other</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span>0</span>
          </td>
          <td><span>0</span>
          </td>
          <td><span>0</span>
          </td>
          <td><span>0</span>
          </td>
          <td><span>0</span>
          </td>
          <td><span>0</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id='data_con_2'>
    <table cellspacing='0' cellpadding='0' border='0'>
      <thead>
        <tr>
          <th>Data Container 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span>0</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id='data_con_3'>
    <table cellspacing='0' cellpadding='0' border='0'>
      <thead>
        <tr>
          <th>Data Container 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span>0</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id='data_con_4'>
    <table cellspacing='0' cellpadding='0' border='0'>
      <thead>
        <tr>
          <th>Data Container 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span>0</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<table cellspacing='0' cellpadding='0' border='0'>
  <thead>
    <tr>
      <th col_name='one'><span>Column Header 1</span>
      </th>
      <th col_name='two'><span>Column Header 2</span>
      </th>
      <th col_name='three'><span>Column Header 3</span>
      </th>
      <th col_name='four'><span>Column Header 4</span>
      </th>
      <th col_name='five'><span>Column Header 5</span>
      </th>
      <th col_name='six'><span>Column Header 6</span>
      </th>
      <th col_name='seven'><span>Column Header 7</span>
      </th>
      <th col_name='eight'><span>Column Header 8</span>
      </th>
      <th col_name='nine'><span>Column Header 9</span>
      </th>
      <th col_name='ten'><span>Column Header 10</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>Column Header 1</span>
      </td>
      <td><span>Column Header 2</span>
      </td>
      <td><span>Column Header 3</span>
      </td>
      <td><span>Column Header 4</span>
      </td>
      <td><span>Column Header 5</span>
      </td>
      <td><span>Column Header 6</span>
      </td>
      <td><span>Column Header 7</span>
      </td>
      <td><span>Column Header 8</span>
      </td>
      <td><span>Column Header 9</span>
      </td>
      <td><span>Column Header 10</span>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

我会张贴一张照片，但我无法这样做。但是，您可以在您的网站的代码段中尝试我的代码;有很多方法。让我知道还有什么可能有帮助＆amp;您对此问题的任何想法。

更新：我忘了指定th的相对父级＆gt;跨越了。通过“修复”提供th{position:relative;}个原因。 th > span{position:absolute; opacity:0;}显示与使用导致问题的其他属性相同的结果。

我的问题仍然是为什么要重新调整整个页面的大小。