如何只让一个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;
  }

无论您尝试将单元格制作得多么小，它总是会占用至少 16 像素的空间。最好的选择是在标记中根本没有空单元格，如果它们没有实际用途的话。

或者，您可以取消填充：

.statusBlank {
     padding: 0;
}