CSS 전체 페이지

Question

내가 ServiceNow로 내에서 CMS 페이지를 만드는거야 및 젤리 스크립트에서 테이블을 생성 한 영향을 미치는 태그 :

<g:evaluate var="jvar_job_details"> 
var selection = new GlideRecord('u_selection'); 
selection.addQuery('u_selection_user.u_candidate_name', gs.getUserID()); 
selection.query(); 
var title_list = "<table>"; 
    title_list += "<tr> <th>" + 'Job Title' + "</th> <th>" + 'Location' + "</th> <th>" + 'Position Number' + "</th> <th>" + 'Certification Number' + "</th> <th>" + 'Grade' + "</th> <th>" + 'Series' + "</th> </tr>"; 
while(selection.next()) { 
    title_list += 
    "<tr> <td>" + selection.u_selection_position_number.u_job_title.getHTMLValue() + "</td> <td>" + selection.u_selection_position_number.u_job_location.getHTMLValue() + "</td> <td>" + selection.u_selection_position_number.u_position_number.getHTMLValue() + "</td> <td>" + selection.u_selection_position_number.u_certification_number.getHTMLValue() + "</td> <td>" + selection.u_selection_position_number.u_grade.getHTMLValue() + "</td> <td>" + selection.u_selection_position_number.u_series.getHTMLValue() + "</td> </tr>" ; 
    } 
    title_list += "</table>"; 
</g:evaluate> 

이 그것을 할 수있는 가장 우아한 방법은 확실하지만, 테이블 않음 참으로 나타납니다. 그런 다음 CSS를 사용하여 표 스타일을 지정했습니다.

table { 
    border-collapse: collapse; 
    margin-left: auto; 
    margin-right: auto; 
} 

th, td { 
    border-bottom: 1px solid #ddd; 
    padding: 0.5rem; 
    text-align: left; 
} 

아주 간단한 것. 그러나 패딩 : 0.5rem; 이것이 전체 페이지의 표 임에도 불구하고 전체 페이지에 영향을 미치기 때문에 필자에게 적합합니다. 코드의 해당 부분이 들어가면 전체 페이지가 패딩 된 것처럼 보입니다. 나는 td 요소에 background-color : red를 추가하여 문제를 해결하고 문제점을 줄였습니다. 그리고 이것이 내가 붙어있는 곳입니다. 어떤 생각이나 제안?

Answer 1

페이지에 더 많은 표를 생성했을 수 있습니다.

생성 된 테이블에 ID를 지정하십시오. 당신이 가장 가능성이 이미 추가되어 CMS 도구를 사용하고 있기 때문에 나는이

var title_list = "<table>";

에

var title_list = "<table id='myTable'>";

을 변경하고

#myTable th, td { 
    border-bottom: 1px solid #ddd; 
    padding: 0.5rem; 
    text-align: left; 
} 

Answer 2

처럼 CSS를 변경 의미 당신을위한 마크 업이 많이 있습니다. 당신이 만들고있는 테이블에 클래스를 추가하고 그 CSS 클래스를 사용하여 테이블을 스타일링하는 것이 좋습니다. 모든 테이블 셀 테이블에 클래스를 추가

...

var title_list = "<table class='myClass'>"; 

하고 나머지는 스타일 ...

table.myClass{} 

table.myClass th, table.myClass td{}