0

table { width: 100%; border-spacing: 0; border-collapse: collapse; }
td { padding: 0; margin: 0; border: 1px solid black; }
<table><tr><td style="width:0">left</td><td>right</td></tr></table>

Here is a code snippet: We set width of table to 100%, and set width of one table cell to 0.

The render result is very different in Google Chrome than other browsers. Which render result is the correct one? Or are there any specifications about such situation?

enter image description here

tsh
  • 4,263
  • 5
  • 28
  • 47
  • try using CSS resets for consitency here is a link https://necolas.github.io/normalize.css/ hope this helps... – Chandra Shekhar Jun 16 '17 at 03:44
  • @ChandraShekhar I'm asking which one is correct, not how to hack on it. – tsh Jun 16 '17 at 03:45
  • There is no "correct one", it will always depend on the browser you are using. You can use [Vendor Prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) so that even you are using other browser, the rendered element will be the same as what you are expecting to appear – Carl Binalla Jun 16 '17 at 03:46
  • @ChandraShekhar "normalize.css" or "reset" has nothing to do with this testcase which i had just tried. – tsh Jun 16 '17 at 03:47

1 Answers1

0

Using display:flex; and float:left; on td you will get same result and view on browsers.

Vinit S
  • 69
  • 3