Как сделать так, чтобы элемент css появлялся на одной странице?

0

Я новичок в CSS и SCSS. Моя проблема кажется очень простой, но я не уверен, с чего начать.

У меня есть три страницы, и у каждого из них есть таблица, которая выглядит примерно так:

Изображение 174551

На других страницах я хочу, чтобы поля (слева) уходили, но я хочу использовать ту же таблицу стилей CSS. Вот как выглядит одна из таблиц другой страницы:

Изображение 174551

Я хочу, чтобы пространство справа исчезло, а второе слово выровнялось влево.

Вот мой 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>
  • 0
    почему бы вам не дать телу класс и не настроить свой CSS для рестайлинга на основе этого, то есть body.second-page td {// style here}
  • 0
    Можно ли вообще поменять разметку? Например, можете ли вы добавить класс в тело каждой страницы, чтобы идентифицировать их? Или вы можете просто удалить разметку для тех полей на страницах, которые в ней не нуждаются?
Теги:
sass
alignment

1 ответ

2
Лучший ответ

Проблема возникает из-за этого:

  tr td {
    padding:6px 8px;
  }

Независимо от того, насколько малы вы пытаетесь сделать свою ячейку, она всегда занимает не менее 16 пикселей пространства. Ваш лучший вариант - просто не иметь пустых ячеек в вашей разметке вообще, если они не служат реальной цели.

Кроме того, вы можете убить прокладку:

.statusBlank {
     padding: 0;
}
  • 0
    Уничтожение отступов сработало, но разве это небрежный способ исправить это? У меня есть другие варианты?
  • 0
    Это зависит от назначения этих пустых ячеек. Если у них иногда будет контент, убийство отступов не будет выглядеть очень хорошо, когда у вас есть контент там. Заполнитель контента какого-либо рода может быть хорошим вариантом. Настоятельно рекомендуется использовать заголовки таблиц, чтобы пустые ячейки никогда не были неоднозначными.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню