remove additional white space in responsive tables

[aleti]

when i reduce the browser window you will see a different lay out for iphone window...i am using a responsive tables code...the problem is i wanted the left column in iphone table lay out to touch the left corner of the browser....but there is addition white space between left column and browser...how to remove the additional space....http://jsfiddle.net/bz2C4/37/\[code\]table { width: 100%; border-collapse: collapse;}/* Zebra striping */ tr:nth-of-type(odd) { background: #eee;}th { background: #1a4567; color: white; font-weight: bold;}td, th { padding: 6px; border: 1px solid #ccc; text-align: left;}/* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: static; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ td:nth-of-type(1):before { content:"BOM Id"; } td:nth-of-type(2):before { content:"Brand Name"; } td:nth-of-type(3):before { content:"BOM Type"; } td:nth-of-type(4):before { content:"BOM Description"; } td:nth-of-type(5):before { content:"Edit"; } td:nth-of-type(6):before { content:"Related"; } td:nth-of-type(7):before { content:"Print"; } td:nth-of-type(8):before { content:"ECO"; } td:nth-of-type(9):before { content:"Dev"; } td:nth-of-type(10):before { content:"Files"; }}/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body { padding: 0; margin: 0; width: 320px; }}/* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body { width: 495px; }}\[/code\]