对齐表格行和列

Question

我有两张桌子：

第一个表有 2 行 4 列。第一列的行跨度为 2。 然而，在图片中，最后 3 列未与两行对齐。如何解决这个问题？

此外，此表的列大小相同。

表 2 也有 3 列，但有几行。然而，前 3 列似乎挤在一起了。任何人都可以看到问题吗？我认为它可能在我的 CSS 中。

表格的 HTML：

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

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

<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 和 positionAnchor 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 }