表格在其他浏览器中显示不好

Question

我的网页上有<table>。在 Google Chrome 上，<table> 显示良好。它的左右两边都有填充。当我打印页面时，它也显示得很好。它适合在纸上。但是当我尝试在 Internet Explorer 或 Mozilla Firefox 中打开页面时，<table> 不适合。没有 padding-right 并且最后一列显示一半。此外，当我打印页面时，最后一列打印一半。

有人知道我该如何解决这个问题吗？

这是我<table>的CSS

table.inventory { clear: both; border: 0px; line-height: 1.2;width: 100%; padding-left:20px; padding-right:20px;font-size: 85%;}
table.inventory th { font-weight: bold; border: 0px;line-height: 1.2;text-align: left; }

table.inventory td:nth-child(1) { border: 0px;line-height: 1.2;width: 47.5%; }
table.inventory td:nth-child(2) { border: 0px;line-height: 1.2;width: 12.5%; }
table.inventory td:nth-child(3) { border: 0px;line-height: 1.2;text-align: right; width: 15%; }
table.inventory td:nth-child(4) { border: 0px;line-height: 1.2;text-align: right; width: 12.5%; }
table.inventory td:nth-child(5) { border: 0px;line-height: 1.2;text-align: right; width: 12.5%; }

https://jsfiddle.net/ss6780qn/

Answer 1

您必须在全局选择器中将 box-sizing 从 content-box 设置为 border-box

*{
  box-sizing: border-box;
}

Answer 2

您只需将其添加到您的 CSS 中，然后您就可以看到 padding-right 和最后一列。

body {
    max-width: 100%;
}

添加上面的代码。

*
{
	border: 0;
	box-sizing: content-box;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	list-style: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	vertical-align: top;
}

body {
    max-width: 100%;
}

/* page */

html { font: 16px/1 'Arial', sans-serif; overflow: auto; padding: 0.5in; }
html { background: #999; cursor: default; }

body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.3in; width: 8.5in; }
body { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); }

table.inventory { clear: both; border: 0px; line-height: 1.2;width: 100%; padding-left:20px; padding-right:20px;font-size: 85%;}
table.inventory th { font-weight: bold; border: 0px;line-height: 1.2;text-align: left; }

table.inventory td:nth-child(1) { border: 0px;line-height: 1.2;width: 47.5%; }
table.inventory td:nth-child(2) { border: 0px;line-height: 1.2;width: 12.5%; }
table.inventory td:nth-child(3) { border: 0px;line-height: 1.2;text-align: right; width: 15%; }
table.inventory td:nth-child(4) { border: 0px;line-height: 1.2;text-align: right; width: 12.5%; }
table.inventory td:nth-child(5) { border: 0px;line-height: 1.2;text-align: right; width: 12.5%; }

<div class="content">
  <table class="inventory">
    <thead>
      <tr>
        <th><span>COL1</span></th>
        <th><span>COL2</span></th>
        <th><span>COL3</span></th>
        <th><span>COL4</span></th>
        <th><span>COL5</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span>Test data 1</span></td>
        <td><span>Test data 1</span></td>
        <td><span>Test data 1</span></td>
        <td><span>Test data 1</span></td>
        <td><span>Test data 1</span></td>
      </tr>
    </tbody>
  </table>
</div>