Question

我的网页上有<table>。在Google Chrome上，<table>显示效果很好。它左右有一个填充物。当我打印页面时，它也很好地显示。它适用于纸张。但是当我尝试在Internet Explorer或Mozilla Firefox中打开页面时，<table>不适合。没有填充权限，最后一列显示为一半。另外，当我打印页面时，最后一列打印了一半。

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

以下是我的<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: 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>

表格在其他浏览器中没有很好地显示

2 个答案: