0

テーブルを含む次のコードがありますが、テーブルの高さは別のブラウザや印刷時に同じではありません。列1、2、および3の画像の違いを参照してください。すべてのテーブルに、線の有無にかかわらず同じ高さが必要です。

ありがとう

Martijn

テーブルレイアウト

css：

.prn_outer {
    margin: 0;
    padding: 0;
    border: 1px solid #333; 
}

.prn_inner {
    margin: 0;
    padding: 0;
    height: 160px;
    border: 1px solid #333; 
}

.prn_row_top {
    margin: 0;
    padding: 0;
    border: 1px solid #333; 
}

.prn_row_bottom {
    margin: 0;
    padding: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333;
}

html： 

 <table border="0" cellpadding="0" cellspacing="0" width="100%" class="prn_outer">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td width="20%"><table border="0" height="160" cellpadding="0" cellspacing="0" width="100%" class="prn_inner">
              <tr>
                <td height="18">&nbsp;</td>
              </tr>
              <tr>
                <td height="18" class="prn_row_bottom">&nbsp;</td>
              </tr>
              <tr>
                <td height="18">&nbsp;</td>
              </tr>
              <tr>
                <td height="18" class="prn_row_bottom">&nbsp;</td>
              </tr>
              <tr>
                <td height="18">&nbsp;</td>
              </tr>
              <tr>
                <td height="18" class="prn_row_bottom">&nbsp;</td>
              </tr>
              <tr>
                <td height="18">&nbsp;</td>
              </tr>
              <tr>
                <td height="18">&nbsp;</td>
              </tr>
            </table></td>
          <td width="20%"><table border="0" height="160" cellpadding="0" cellspacing="0" width="100%" class="prn_inner">
              <tr>
                <td height="18">&nbsp;</td>
              </tr>
              <tr>
                <td height="18" class="prn_row_bottom">&nbsp;</td>
              </tr>
              <tr>
                <td height="18">&nbsp;</td>
              </tr>
              <tr>
                <td height="18" class="prn_row_bottom" >&nbsp;</td>
              </tr>
              <tr>
                <td height="18">&nbsp;</td>
              </tr>
              <tr>
                <td height="18" class="prn_row_bottom">&nbsp;</td>
              </tr>
              <tr>
                <td height="18">&nbsp;</td>
              </tr>
              <tr>
                <td height="18">&nbsp;</td>
              </tr>
            </table></td>
          <td width="20%"><table border="0" height="160" cellpadding="0" cellspacing="0" width="100%" class="prn_inner">
              <tr>
                <td height="18" class="prn_row_bottom">&nbsp;</td>
              </tr>
              <tr>
                <td height="134">&nbsp;</td>
              </tr>
            </table></td>
          <td width="20%"><table width="100%" height="160" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td height="158">&nbsp;</td>
              </tr>
            </table></td>
          <td width="20%"><table width="100%" height="160" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td height="158">&nbsp;</td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
4

2 に答える 2

0

prn_outerの高さも入れてみましたか？印刷には、@ media printを使用して、必要な正しい形式で再生できます。これは、印刷にのみ適用されます。

于 2012-10-02T10:59:19.870 に答える
0

テーブルをネストするときに、境界線の追加のピクセル高さを考慮していません。

td table.prn_inner {
    margin: 0;
    padding: 0;
    height: 158px <----- this can't stay at 160px, if it's nested
    border: 1px solid; 
}

また、HTMLとCSSのテーブルパラメータとの競合もあります。すべてのテーブル宣言をCSSに移動することで、これをクリーンアップできます（HTMLも非常に読みやすくなります）。

CSS
table { width:100%; }
td { width:20% }
.prn_inner td { height:18px }

<table>
    <tr>
        <td><table class="prn_inner">
              <tr>
                <td>table in a table</td>
              </tr>
            </table>
        </td>
    </tr>
</table>

注：ベストプラクティス=テーブルはデータ用です。ネストされたテーブルは、レイアウト/デザインの選択が不十分です。

于 2012-10-02T13:47:17.440 に答える