html - 浏览器中的表格高度不同

Question

表格有如下代码，但表格高度在不同浏览器和打印时不一样。查看第 1、2 和 3 列的图片差异。我需要每张 table 的高度相同，有或没有线条。

谢谢

马丁

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>

Answer 1

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

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>

注意:最佳实践 = 表格用于数据。您的嵌套表格在布局/设计方面的选择不当。