如何只使一个CSS元素出现在一个页面上？ [英] How to only make a css element appear on one page?

问题描述

我是CSS和SCSS的新手。我的问题似乎很容易修复，但我不知道从哪里开始。

I'm new to CSS and SCSS. My issue seems very simple to fix but I'm not sure where to start.

我有三个页面，他们每个都有一个类似于这样的表：

I have three pages and they each have a table that look similar to this:

在其他页面上，我想要的框（在左边）消失，但我想使用相同的CSS样式表。下面是其他页面的表格：

On the other pages I want the boxes (on the left) to go away, but I want to use the same CSS style sheet. Here is what the one of the other page's table look like:

我想让右侧的空格消失，第二个字母会向左对齐。

I want the space on the right to go away and the word second to align all the way to the left.

这是我的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页面不工作：

Here is my HTML for the page that is not working:

<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;
  }

无论您尝试制作单元格的规模有多小，至少16px的空间。您最好的选择是，如果您的标记中没有空单元格，那么它们就不会有任何实际用途。

No matter how small you try to make your cell, it will always take up at least 16px of space. Your best option is to just not have the empty cells in your markup at all if they're not serving an actual purpose.

或者，您可以删除填充： / p>

Alternately, you could kill the padding:

.statusBlank {
     padding: 0;
}

这篇关于如何只使一个CSS元素出现在一个页面上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！