Georgiaejs
New Member
I am trying to implement "the unseen column" responsive table technique by assigning a class to a specific column that I can hide if the browser is too narrow.Truncated dummy html example:\[code\]<!doctype html><html> <head> <style> table { width:100%; background-color:#000; border-spacing: 1px; } table tr { background-color:#fff; } table tr:nth-child(2n+1) { background-color: #ccc; } table tr.Title { color:#fff; background-color:#0e228c; } table tr.ColumnHeadings { background-color:#e4e0d4; } @media only screen and (max-width: 1024px) { .VolumeCell {display:none;} } </style> </head> <body> <table> <tr class="Title"> <th colspan="6">Stock Prices</th> </tr> <tr class="ColumnHeadings"> <th>Code</th> <th>Company</th> <th>Price</th> <th>Change</th> <th>Change %</th> <th class="VolumeCell">Volume</th> </tr> <tr> <td>AAC</td> <td>Austrailian Agricultural Company Ltd</td> <td>$1.39</td> <td>-0.01 </td> <td>-0.36%</td> <td class="VolumeCell">9,395</td> </tr> <tr> <td>AAD</td> <td>Ardent Liesure Grp.</td> <td>$1.15</td> <td>+0.02 </td> <td>1.32%</td> <td class="VolumeCell">56,431</td> </tr> <tr> <td>AAX</td> <td>Ausenco Ltd.</td> <td>$4.00</td> <td>-0.04 </td> <td>-.99%</td> <td class="VolumeCell">90,641</td> </tr> </table> </body></html>\[/code\]This is all fine and dandy, except there is a single pixel border or space remaining on the far right of the table in some browsers, specifically Chrome 26. I've tried tweaking the border-collapse and border on many of the table elements in the media query. I've also tried setting negative margins to account for the pixel. Being the anal-retentive person I am, I can't let it go, but I would prefer not to use jQuery to solve this problem.So how can I account for the missing column?