title: Misaligned content in table cells
body: <p>I am making some table content and got some problems.<br>
  When i want to add more text to first table column, it adds extra space do all other columns.<br>
  Here u can see what i am saying about<br>
  <img src="https://i.stack.imgur.com/0Aovg.jpg" alt="enter image description here"></p>
  
  <p>U can check my fiddle <strong><a href="http://jsfiddle.net/Lbj6ccj5/1/" rel="nofollow noreferrer">here</a></strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table id="mytable" border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;img src="" /&gt;
                  &lt;span&gt;some text&lt;br&gt;asdasd&lt;br&gt;asdas&lt;/span&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;img src="" /&gt;
                  &lt;span&gt;some text&lt;/span&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    #mytable{
      width:400px;
  }
  #mytable tr td{
      padding:10px;
  }
  #mytable tr td img{
      width:200px;
      height:100px;
  }
  </code></pre>