<!DOCTYPE HTML> <html> <head> <title>Conflicting percent widths on table cells</title> <style type="text/css"> table, td { border-spacing: 0; border: none; padding: 0; } </style> </head> <body> <!-- large percentage effect operates per-column --> <!-- also depends on truncation of percentages to 100% --> <table> <tr> <td style="background: yellow" width="50%">x</td> <td style="background: aqua" width="99%">x</td> </tr> <tr> <td style="background: blue" width="50%">x</td> <td style="background: fuchsia" width="50%">x</td> </tr> </table> <table> <tr> <td style="background: blue" width="50%">x</td> <td style="background: fuchsia" width="50%">x</td> </tr> <tr> <td style="background: yellow" width="50%">x</td> <td style="background: aqua" width="99%">x</td> </tr> </table> </body> </html>