对齐表格行和列

Question

我有两个表格：

第一个表格有2行4列。第一列的行跨度为2. 但在图片中，最后3列未与两行对齐。这怎么解决？

此外，此表已被制成使其按列大小相同。

表2也有3列但有几行。但是，似乎前三列已经压扁在一起。任何人都可以看到问题吗？我认为这可能在我的CSS中。

的HTML表：

<table class="equalDevide" cellpadding="0" cellspacing="0" width="100%" border="0"> 

这里是我的HTML为第一个表行1列2

<td> 
      <div id="positionAnchor"> 
       <img src="adele.jpg" alt="Adele"> 
       <div id="bottom"> 
        <h4 class="topText">ALBUM</h4> 
        <h3 class ="topText">ADELE 21 COVER </br> ADELE</h3> 
       </div></div> 
     </td> 

行2列2

<tr id="left-col"> 
      <td> 
       <div id="caption-color"> 
        <h3 id="active">Adele 21 Album</h3> 
        <p class="music-name"><span class ="glyphicon glyphicon-headphones"> Adele - Skyfall</span></p> 
       </div> 
      </td> 

这是与它一起去的CSS：

#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%; 
} 

二表HTML：

<table class="table"> 
     <tbody> 
      <tr> 
       <td id="left-info"> 
        <span class="glyphicon glyphicon-calendar"> 17 SEPTEMBER</span> 
       </td> 
       <td id="left-info"> 
        <span class="glyphicon glyphicon-music" > MARTIN GARRIX</span> 
       </td> 
       <td id="left-info"> 
        <span class="glyphicon glyphicon-map-marker"> NEW ORLEANS,LA</span> 
       </td> 
       <td id="buyNow"> 
        Buy Now 
       </td> 
      </tr> 

二表CSS：

table{ 
border-collapse: collapse; 
} 
tr{ 

background-color: #575757; 
border-top: 10px solid #383D3D !important; 
} 

td{ 
border-left: 3px solid #383D3D !important; 
text-align: center; 
} 

Answer 1

比赛＃ caption-color CSS和positionAncho r CSS up ...

#positionAnchor { 
    position: relative; 
    display: inline-block; 
    text-align:center; /* and center text */ 
} 

第二张表的css规则不是你所想的。

table{ ... rules for element table } 
.table{ ... rules for class table }