CSS 요소를 한 페이지에만 표시하는 방법은 무엇입니까?

Question

저는 CSS와 SCSS를 처음 사용합니다. 내 문제는 해결하기가 매우 쉬운 것처럼 보이지만 어디서부터 시작해야할지 모르겠습니다.

나는 세 페이지를 가지고 있고 각이 비슷한 모양의 테이블이 : 나는 (왼쪽) 상자 멀리 가고 싶은 다른 페이지에

을,하지만 난 원하는 동일한 CSS 스타일 시트를 사용하십시오. 여기에 다른 페이지의 테이블의 하나처럼 보이는 것입니다 :

난 도망 갈 단어가 두 번째 왼쪽에있는 모든 방법을 정렬 오른쪽에 공간을 원한다.

다음

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

상관없이 여기에

내 SCS들입니다 얼마나 작게 세포를 만들려고하는지, 적어도 16px 공간을 차지합니다. 가장 좋은 방법은 실제 용도로 사용하지 않는 경우 마크 업에 빈 셀을 넣지 않는 것입니다.

다른 방법으로, 당신은 패딩 죽일 수 : 당신이 몸에게 클래스를 제공하고 CSS를 조정하지 않는 이유

.statusBlank { 
    padding: 0; 
}