0

有以下表格代码，但表格高度在不同浏览器和打印时不一样。请参阅第 1,2 列和第 3 列的图片差异。我需要每张桌子的高度相同，有或没有线条。

谢谢

马汀

表格布局

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

嵌套表格时，您没有考虑边框的额外像素高度。

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 回答
0

你也试过把 prn_outer 高度放在一边吗？对于打印，您可以使用@media print 并以您需要的正确格式在那里播放，并且仅适用于打印

于 2012-10-02T10:59:19.870 回答