javascript - CSS 标签影响整个页面

Question

我正在 ServiceNow 中创建一个 CMS 页面，并在 Jelly 脚本中创建了一个表:

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

非常简单的东西。然而，padding:0.5rem；让我很不舒服，因为它影响了整个页面，尽管这是整个页面中的表格。当这部分代码插入时，整个页面似乎都被填充了。我向 td 元素添加了背景颜色:红色，以便排除故障并缩小问题范围，这就是我陷入困境的地方。有什么想法或建议吗？

Answer 1

可能您在页面中创建了更多表格。

为创建的表提供一个 ID。我的意思是改变这个

var title_list = "<table>";

到

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

并更改你的CSS，例如

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