CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 952

Table is not well displayed in other browsers

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/

Upvotes: 1

Views: 77

Answers (2)

Dhruvil21_04
Dhruvil21_04

Reputation: 2189

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>

Upvotes: 0

karthick
karthick

Reputation: 12176

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

*{
  box-sizing: border-box;
}

Upvotes: 1

Related Questions