Html 如何使css元素只出现在一个页面上？

我不熟悉CSS和SCS。我的问题似乎很容易解决，但我不知道从哪里开始

我有三个页面，每个页面都有一个类似于此的表格：

在其他页面上，我希望框（左侧）消失，但我希望使用相同的CSS样式表。下面是另一个页面的表的外观：

我希望右边的空格消失，第二个单词向左对齐

这是我的SCS：

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>

6号考试

第二
0000-00-00 00:00:00
第二
0000-00-00 00:00:00
第二
0000-00-00 00:00:00
第二
0000-00-00 00:00:00
最终项目

第二
0000-00-00 00:00:00
第二
0000-00-00 00:00:00

问题来自以下方面：

  tr td {
    padding:6px 8px;
  }

无论你想让你的电池多小，它都会占据至少16px的空间。最好的选择是，如果标记中的空单元格没有实际用途，就不要将其包含在标记中

或者，您可以终止填充：

.statusBlank {
     padding: 0;
}

---

为什么不给body一个类，并根据它调整css的样式，即body.second-page td{//style here}是否可以更改标记？例如，您可以在每个页面的主体中添加一个类来标识它们吗？或者你可以删除页面上那些不需要的框的标记吗？消除填充是有效的，但这是一种草率的修复方法吗？我还有其他选择吗？这取决于那些空单元格的用途。如果他们有时会有内容，当你有内容的时候，删除填充不会让它看起来很好。某种占位符内容可能是一个不错的选择。强烈建议使用表格标题，这样空单元格就不会模棱两可。