<!DOCTYPE HTML> <html> <head> <title>Percent widths on table cells</title> <style type="text/css"> table { border-spacing: 0; padding: 0; border: none; empty-cells: show; } td { border: 1px solid; padding: 0; } </style> </head> <body> <!-- column min widths must match tests, since we have to size slightly smaller than percents because of the extra space from the borders --> <table width="100%"><tr height="50"> <td style="background:yellow" width="40%"><div style="width:100px"></div></td> <td style="background:aqua" width="40%"><div style="width:100px"></div></td> <td style="background:fuchsia" width="20%"><div style="width:100px"></div></td> <td style="background:blue"></td> </tr></table> </body> </html>