Table is not well displayed in other browsers

Question

I have a <table> on my web page. On Google Chrome the <table> is well displayed. It has a padding on left and right. When I print the page it is well displayed also. It fits on paper. But when I try to open the page in Internet Explorer or Mozilla Firefox the <table> does not fit. There is no padding-right and the last column is displayed half. Also when I print the page the last column is printed half.

Does someone know how I can fix this problem?

Here is the CSS of my <table>

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/

https://stackoverflow.com/questions/19068909/why-is-box-sizing-acting-different-on-table-vs-div — Gerard, Jun 02 '17 at 06:47
@Gerard do I need to write `box-sizing: border-box;` in the `
`? — John, Jun 02 '17 at 06:58
If it is an option for you, use divs and display:table, display:table-cell. Apparently tables don't work well with box-sizing across browsers. — Gerard, Jun 02 '17 at 07:08

score 1 · Answer 1 · answered Jun 02 '17 at 07:22

1

You have to set box-sizing from content-box to border-box in your global selector

*{
  box-sizing: border-box;
}

answered Jun 02 '17 at 07:22

karthick

11,998
6
56
88

Dhruvil21_04 · Answer 2 · 2017-06-02T07:35:21.770

You just need to add this into your CSS and then you can see padding-right and also last column.

body {
    max-width: 100%;
}

Add the above code.

*
{
 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>

It is still the same. In Google Chrome there is a `padding-left:20px;` and `padding-right:20px;`. In Internet Explorer and Firefox there is a `padding-left:20px;` but `padding-right` looks like `padding-right:5px;` — John, Jun 02 '17 at 07:08
Unfortunately, I'm not having IE right now. But, I have checked in mozilla firefox. It looks fine to me. I'm giving you link below. You can check there. The same code in JSfiddle as in above snippet. https://jsfiddle.net/Dhruvil21_04/ng2LqaLx/ — Dhruvil21_04, Jun 02 '17 at 07:17

Table is not well displayed in other browsers

2 Answers2