title: Why is width on td element not working with table-layout fixed?
body: <p>I have read many post on SO about this, e.g. <a href="https://stackoverflow.com/questions/23871179/td-column-width-value-not-working-with-fixed-table-layout?noredirect=1&amp;lq=1">TD column width value not working with fixed table-layout</a> <a href="https://stackoverflow.com/questions/11090544/td-widths-not-working?noredirect=1&amp;lq=1">td widths, not working?</a> etc. But still when I give width to <code>td</code> it doesn't get that width. Here is a working example of the problem:  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: 400px;
    padding: 5px;
    border: 1px solid red;
  }
  table {
    table-layout: fixed;
    width: 100%;
    border: 1px dotted green;
  }
  td {
    word-break: break-all;
  }
  td:nth-of-type(1) {
    width: 50px;
  }
  td:nth-of-type(2) {
    width: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width: 400px;"&gt;
    &lt;table style="table-layout: fixed; width: 100%;"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr class="odd"&gt;
          &lt;td class=""&gt;
            &lt;a href="#"&gt;The_first_line&lt;/a&gt;
          &lt;/td&gt;
          &lt;td class=""&gt;
            &lt;a href="#"&gt;The_second_but_a_long_line_with_so_many_characters&lt;/a&gt;
          &lt;/td&gt;
          &lt;td class=""&gt;
            &lt;ul class=""&gt;
              &lt;li class=""&gt;&lt;a href="#" rel="tag" title="" class=""&gt;The simple&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;a href="#"&gt;last&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The first <code>td</code> should have taken 50px and the second should have taken 150px, but this is not happening. Why?</p>