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

非常简单的东西。但是，填充：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;
}

Answer 2

由于您使用的CMS工具最有可能已经为您添加了大量标记，我建议您为正在创建的表添加一个类，并使用该css类设置该表的样式而不是样式所有表格和单元格

向表中添加一个类......

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

然后设计其余部分......

table.myClass{}

table.myClass th, table.myClass td{}

影响整个页面的CSS代码

2 个答案: