Question

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

感谢名单

马亭

Table layout

的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

你是否尝试过将prn_outer高度放入？对于打印，您可以使用@media打印并使用您需要的正确格式在那里播放，并且仅适用于打印

Answer 2

嵌套表时，不考虑边框的额外像素高度。

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>

注意：最佳做法=表格用于数据。您的嵌套表在布局/设计中难以选择。

表格高度在浏览器中不相同

2 个答案: