表格对齐方式不起作用

Question

我不确定为什么我的表格中的内容未对齐到左侧。这是一张图片：我想让'second'这个词坐在左边。这是我的HTML：

<section> 
<p>Test Number 6 </p> 
    <table> 
    <tbody> 
     <tr> 
     <td class="statusBlank"></td> 
     <td>second</td> 
     <td>0000-00-00 00:00:00</td> 
     <td class="tightcell"><a href="#">Download</a> 
     </tr> 
     <tr> 
     <td class="statusBlank"></td> 
     <td>second</td> 
     <td>0000-00-00 00:00:00</td> 
     <td class="tightcell"><a href="#">Download</a> 
     </tr> 
     <tr> 
     <td class="statusBlank"></td> 
     <td>second</td> 
     <td>0000-00-00 00:00:00</td> 
     <td class="tightcell"><a href="#">Download</a> 
     </tr> 
     <tr> 
     <td class="statusBlank"></td> 
     <td>second</td> 
     <td>0000-00-00 00:00:00</td> 
     <td class="tightcell"><a href="#">Download</a> 
     </tr> 
    </tbody> 
    </table> 

    <p>Final Project </p> 
    <table> 
    <tbody> 
     <tr> 
     <td class="statusBlank"></td> 
     <td>second</td> 
     <td>0000-00-00 00:00:00</td> 
     <td class="tightcell"><a href="#">Download</a> 
     </tr> 
     <tr> 
     <td class="statusBlank"></td> 
     <td>second</td> 
     <td>0000-00-00 00:00:00</td> 
     <td class="tightcell"><a href="#">Download</a> 
     </tr> 
    </tbody> 
    </table> 
</section> 

这里是我的SCSS（我用无礼的话）：

/* ----TABLE---- */ 
section { 
    @include grid-row(); 
} 
section p { 
    @include grid-column(12); 
    font-family: $font-stack; 
    font-size: 23px; 
    padding: 0; 
    margin: 0; 
} 
.button { 
    font-family: $font-stack; 
    color: #fff; 
    background-color: $secondary-color; 
    height: 27px; 
    text-align: center; 
    border-radius: 7px; 
    margin: 6px 0 5px 0; 
    padding: 5px 7px 5px 7px; 
} 
.button:hover { 
    background-color: $primary-color; 
} 
table { 
    @include grid-column(12); 
    padding: 0; 
    border-left: none; 
    border-right: none; 
    text-align:right;  
    border-collapse:separate; 
    border-spacing: 0 2px; 
} 
table { 
    tr { 
    background: #fff; 
    } 
    tr:hover { 
    background: #EBF7FC; 
    } 
    tr td { 
    padding:6px 8px; 
    } 
    tr td:first-child { 
    border-left: 3px solid #fff; 
    } 
    tr td:last-child { 
    border-right:3px solid #fff; 
    } 
    tr:hover td:first-child { 
    border-left: 3px solid $secondary-color; 
    } 
    tr:hover td:last-child { 
    border-right:3px solid $secondary-color; 
    } 
} 
.status { 
    color:#fff; 
    width: 33px; 
    padding: 5px 0; 
    text-align: center; 
} 
.statusRunning { 
    background-color: #5AD427; 
    @extend .status; 
} 
    .statusQueued { 
    background-color: #A4E786; 
    @extend .status; 
} 
    .statusIncomplete { 
    background-color: #FFCC00; 
    @extend .status; 
} 
.statusBlank { 
} 
table tr td:nth-child(2) { 
    text-align:left; 
} 
.tightcell a { 
margin-right:25px; 
color: $secondary-color; 
} 

什么我没有看到吗？

谢谢！

Answer 1

的问题是，.statusBlank规则没有内容，只需设置此列的宽度（可以是0像素），你会看到第二个是如何让左对齐：

.statusBlank { 
    width: 15px 
}