title: Aligning table rows and columns
body: <p>I have two tables: </p>
  
  <p>First table has 2 rows and 4 columns. The first column has a row span of 2. 
  In the picture however the last 3 columns are not aligned with the two rows. How can this be fixed?</p>
  
  <p>In addition, this table has been made so that it is equal sizes by columns. </p>
  
  <p>Table 2 has also 3 columns but several rows. However it seems that the first 3 columns have squashed together. Can anyone see the problem? I think it might be in my CSS. </p>
  
  <p><img src="https://i.stack.imgur.com/ytwYL.png" alt="This is the image "></p>
  
  <p><strong>HTML for the table:</strong> </p>
  
  <pre><code>&lt;table class="equalDevide" cellpadding="0" cellspacing="0" width="100%" border="0"&gt;
  </code></pre>
  
  <p>Here is my HTML for the first table row 1 column 2 </p>
  
  <pre><code>&lt;td&gt;
              &lt;div id="positionAnchor"&gt;
                  &lt;img src="adele.jpg" alt="Adele"&gt;
                  &lt;div id="bottom"&gt;
                      &lt;h4 class="topText"&gt;ALBUM&lt;/h4&gt;
                      &lt;h3 class ="topText"&gt;ADELE 21 COVER &lt;/br&gt; ADELE&lt;/h3&gt;
                  &lt;/div&gt;&lt;/div&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p><strong>row 2 column 2</strong></p>
  
  <pre><code>&lt;tr id="left-col"&gt;
              &lt;td&gt;
                  &lt;div id="caption-color"&gt;
                      &lt;h3 id="active"&gt;Adele 21 Album&lt;/h3&gt;
                      &lt;p class="music-name"&gt;&lt;span class ="glyphicon glyphicon-headphones"&gt; Adele - Skyfall&lt;/span&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
  </code></pre>
  
  <p>this is the CSS that goes along with it: </p>
  
  <pre><code>#bottom{
  position: absolute;
  display: inline-block;
  bottom: 0px;
  left:0px;
  }
  
  #positionAnchor {
      position: relative;
   width:1px;
  }
  
  
  
  #caption-color{
  background-color: #212121;
  position: relative;
  display: inline-block;
  bottom: 0px;
  padding: 5px;
  float: bottom;
  }
  
   .equalDevide td { 
  width:25%; 
   }
  </code></pre>
  
  <p><strong>Second table html :</strong></p>
  
  <pre><code>&lt;table class="table"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td  id="left-info"&gt;
                      &lt;span class="glyphicon glyphicon-calendar"&gt; 17 SEPTEMBER&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td  id="left-info"&gt;
                      &lt;span class="glyphicon glyphicon-music" &gt; MARTIN GARRIX&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td  id="left-info"&gt;
                      &lt;span class="glyphicon glyphicon-map-marker"&gt; NEW ORLEANS,LA&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td id="buyNow"&gt;
                      Buy Now
                  &lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>
  
  <p><strong>Second table CSS:</strong></p>
  
  <pre><code>table{
  border-collapse: collapse;
  }
  tr{
  
  background-color: #575757;
  border-top: 10px solid #383D3D !important;
  }
  
  td{
  border-left: 3px solid #383D3D !important;
  text-align: center;
   }
  </code></pre>