Anchors in tables
<p>I was trying to link a <code>table</code> with some anchors in the same page, but I don't know what's going on.</p>

<p><a href="https://jsfiddle.net/shivatazo/6d6hseom/1/" rel="nofollow">Here</a> it works as intended. But with <a href="https://jsfiddle.net/shivatazo/zyzghezc/" rel="nofollow">this code</a> it doesn't work.</p>

<pre><code>&lt;table&gt;
  &lt;tr&gt; &lt;/tr&gt;
  &lt;tr id="#i0"&gt;
    &lt;td style="vertical-align:top"&gt;&lt;a href="#section0"&gt;150, 166666&lt;/a&gt;&lt;/td&gt;
    &lt;td class="sec"&gt;&lt;a href="#section0"&gt;PFC CINEMA LAMBRO&lt;/a&gt;&lt;br&gt;
      &lt;font &gt;Plan du radier et des fondation.&lt;/font&gt;&lt;br&gt;
      &lt;br&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="#i1"&gt;
    &lt;td style="vertical-align:top"&gt;&lt;a href="#section1"&gt;151, 165555&lt;/a&gt;&lt;/td&gt;
    &lt;td class="sec"&gt;&lt;a href="#section1"&gt;AXONOMETRIA/CIMENTACIONES&lt;/a&gt;&lt;br&gt;
      &lt;font &gt;Projet pour un et des fondation.&lt;/font&gt;&lt;br&gt;
      &lt;br&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="#i2"&gt;
    &lt;td style="vertical-align:top"&gt;&lt;a href="#section2"&gt;152, 164444&lt;/a&gt;&lt;/td&gt;
    &lt;td class="sec"&gt;&lt;a href="#section2"&gt;EXPO - MAD 2015&lt;/a&gt;&lt;br&gt;
      &lt;font &gt;Exposition des projets du semestre.&lt;/font&gt;&lt;br&gt;
      &lt;br&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="#i3"&gt;
    &lt;td style="vertical-align:top"&gt;&lt;a href="#section3"&gt;153, 163333&lt;/a&gt;&lt;/td&gt;
    &lt;td class="sec"&gt;&lt;a href="#section3" onclick="closeNav()"&gt;PFC CINEMA LAMBRO&lt;/a&gt;&lt;br&gt;
      &lt;font&gt;Projet pour un cinéma à Milan.&lt;/font&gt;&lt;br&gt;
      &lt;br&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;div class="Esp"&gt;&lt;/div&gt;
&lt;a href="#i3"&gt;This should make me go up&lt;/a&gt;
</code></pre>

<p>Any idea why this is happening?</p>