如何讓一個CSS元素出現在一個頁面上？

Question

我是新來的CSS和SCSS。我的問題似乎很簡單，但我不知道從哪裏開始。

我有三個頁面和他們每個人都有一個表，類似於此：

在我想的箱子（左側）走開其他網頁，但我想使用相同的CSS樣式表。下面是其他頁面的表的一個樣子：

我想在右邊的空間走開，這個詞第二對準一路向左。

這裏是我的SCSS：

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 { 
    width: 1px; 
} 
table tr td:nth-child(2) { 
    text-align:left; 
} 
.tightcell a { 
margin-right:25px; 
color: $secondary-color; 
} 

這裏是不工作我對網頁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> 

Answer 1

問題來源於此：

tr td { 
    padding:6px 8px; 
    } 

不管您嘗試製作單元的體積有多小，它總是佔用至少16px的空間。如果他們沒有達到實際目的，最好的選擇就是根本沒有標記中的空單元格。

或者，你可以殺死填充：

.statusBlank { 
    padding: 0; 
}