How to only make a css element appear on one page? - html

Question

I'm new to CSS and SCSS. My issue seems very simple to fix but I'm not sure where to start.
I have three pages and they each have a table that look similar to this:
On the other pages I want the boxes (on the left) to go away, but I want to use the same CSS style sheet. Here is what the one of the other page's table look like:
I want the space on the right to go away and the word second to align all the way to the left.
Here is my 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;
}
Here is my HTML for the page that is not working:
<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">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</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">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
</tbody>
</table>
</section>

Answer 1

The problem comes from this:
tr td {
padding:6px 8px;
}
No matter how small you try to make your cell, it will always take up at least 16px of space. Your best option is to just not have the empty cells in your markup at all if they're not serving an actual purpose.
Alternately, you could kill the padding:
.statusBlank {
padding: 0;
}