Выравнивание стола не работает

Question

Я не уверен, почему мой контент в моей таблице не выравнивается влево. Вот фотография: Я хочу, чтобы слово «второй» сидело слева. Вот мой 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 (я использую Sass):

/* ----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 правило не имеет никакого содержания, просто установите ширину этого столбца (может быть 0px), и вы увидите, как второй один получит выровнен по левому краю:

.statusBlank { 
    width: 15px 
}