html - para - posicionamiento fijo css

¿Cómo hacer que solo aparezca un elemento css en una página?

Question

Soy nuevo en CSS y SCSS. Mi problema parece muy fácil de arreglar, pero no estoy seguro de por dónde empezar.

Tengo tres páginas y cada una tiene una tabla que se parece a esto:

En las otras páginas quiero que las casillas (a la izquierda) se vayan, pero quiero usar la misma hoja de estilo CSS. Aquí está el aspecto de la tabla de la otra página:

Quiero que el espacio de la derecha se vaya y que la palabra segunda se alinee completamente hacia la izquierda.

Aquí está mi 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;
}

Aquí está mi HTML para la página que no está funcionando:

<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

El problema proviene de esto:

 tr td {
padding:6px 8px;
}

No importa cuán pequeño intente hacer su celda, siempre ocupará al menos 16 px de espacio. Su mejor opción es simplemente no tener las celdas vacías en su marcado si no están cumpliendo un propósito real.

Alternativamente, podrías matar el relleno:

.statusBlank {
padding: 0;
}