Edit Question - KnowledgeHub

Title Body

Consider the following HTML: <html> <head> <style> TABLE.data TD.priceCell { background-color: #EEE; text-align: center; color: #000; } div.datagrid table { border-collapse: collapse; } div.datagrid table tbody { position: relative; } </style> </head> <body> <div id="contents" class="datagrid"> <table class="data" id="tableHeader"> <thead> <tr class="fixed-row"> <th>Product</th> <th class="HeaderBlueWeekDay">Price</th> <th class="HeaderBlueWeekDay">Discount</th> </tr> </thead> <tbody> <tr style="font-style: italic;"> <td>Keyboard</td> <td class="priceCell">20</td> <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td> </tr> </tbody> </table> </div> </body> </html> Notice that the last cell has a left and a right border in its inline style. You (or at least I) would expect this to be visible. In IE, this is the case. But in Firefox (6), this is not. You can solve this by: Removing position relative on div.datagrid table tbody in the CSS Changing div.datagrid table tbody to div.datagrid table in t

Tags (comma-separated) Cancel