Я новичок в 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>
Проблема возникает из-за этого:
tr td {
padding:6px 8px;
}
Независимо от того, насколько малы вы пытаетесь сделать свою ячейку, она всегда занимает не менее 16 пикселей пространства. Ваш лучший вариант - просто не иметь пустых ячеек в вашей разметке вообще, если они не служат реальной цели.
Кроме того, вы можете убить прокладку:
.statusBlank {
padding: 0;
}