如何在servicenow中设计一个table
How to design a table in servicenow
我是前端设计新手,我想在Servicenow服务门户中设计一个table如下所示:
我正在尝试,但我没有得到正确的设计
<div class="panel panel-body">
<h2>Book Rooms v1</h2>
<table border="2" class="table table-striped m-b-lg">
<tr>
<th>Country</th>
<th>Title</th>
<th>End Date</th>
</tr>
</table>
我想要一个白色的字段,如 book_ticket、x:y。
我正在详细说明答案。
要使用Bootstrap和bootstrap-javascript,我们必须将其包含在文件中。因此,我包含了 Bootstrap 4.4,并在代码末尾添加了 JavaScript 文件。 (更多请参考here)
然后设计一个table,我们使用html标签来做。然后添加样式,我们可以包括 Bootstrap classes.
请参阅文档 page 了解更多信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<!-- bootstrap 4.4 -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<style>
tr:nth-child(even),
thead {
background-color: #bdc2c7;
}
</style>
</head>
<body>
<div class="container">
<table class="table table-responsive-sm table-bordered border-dark">
<caption style="caption-side: top;">
Books Room v1
</caption>
<thead>
<tr>
<th scope="col" colspan="3">Passenger</th>
</tr>
<tr>
<th scope="col">Serial Number</th>
<th scope="col">Title</th>
<th scope="col">End Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Book Ticket</td>
<td>x:y</td>
<td>r:s</td>
</tr>
<tr>
<td>Book Train</td>
<td>p:q</td>
<td>t:u</td>
</tr>
<tr>
<td>Book Train</td>
<td>p:q</td>
<td>t:u</td>
</tr>
<tr>
<td>Book Train</td>
<td>p:q</td>
<td>t:u</td>
</tr>
</tbody>
</table>
</div>
<!-- Bootstrap js ,popper js and jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</body>
</html>
更新
我已经编辑了代码...
试试这个。
<div class="panel panel-body">
<h2>Book Rooms v1</h2>
<table border="2" class="table m-b-lg">
<thead>
<tr>
<th>Serial Number</th>
<th>Title</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Book_ticket</td>
<td>x: y</td>
<td>p: q</td>
</tr>
<tr class="bg-white text-dark">
<td>Book_train</td>
<td>r: s</td>
<td>t: u</td>
</tr>
</tbody>
</table>
我是前端设计新手,我想在Servicenow服务门户中设计一个table如下所示:
我正在尝试,但我没有得到正确的设计
<div class="panel panel-body">
<h2>Book Rooms v1</h2>
<table border="2" class="table table-striped m-b-lg">
<tr>
<th>Country</th>
<th>Title</th>
<th>End Date</th>
</tr>
</table>
我想要一个白色的字段,如 book_ticket、x:y。
我正在详细说明答案。
要使用Bootstrap和bootstrap-javascript,我们必须将其包含在文件中。因此,我包含了 Bootstrap 4.4,并在代码末尾添加了 JavaScript 文件。 (更多请参考here)
然后设计一个table,我们使用html标签来做。然后添加样式,我们可以包括 Bootstrap classes.
请参阅文档 page 了解更多信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<!-- bootstrap 4.4 -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<style>
tr:nth-child(even),
thead {
background-color: #bdc2c7;
}
</style>
</head>
<body>
<div class="container">
<table class="table table-responsive-sm table-bordered border-dark">
<caption style="caption-side: top;">
Books Room v1
</caption>
<thead>
<tr>
<th scope="col" colspan="3">Passenger</th>
</tr>
<tr>
<th scope="col">Serial Number</th>
<th scope="col">Title</th>
<th scope="col">End Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Book Ticket</td>
<td>x:y</td>
<td>r:s</td>
</tr>
<tr>
<td>Book Train</td>
<td>p:q</td>
<td>t:u</td>
</tr>
<tr>
<td>Book Train</td>
<td>p:q</td>
<td>t:u</td>
</tr>
<tr>
<td>Book Train</td>
<td>p:q</td>
<td>t:u</td>
</tr>
</tbody>
</table>
</div>
<!-- Bootstrap js ,popper js and jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</body>
</html>
更新
我已经编辑了代码...
试试这个。
<div class="panel panel-body">
<h2>Book Rooms v1</h2>
<table border="2" class="table m-b-lg">
<thead>
<tr>
<th>Serial Number</th>
<th>Title</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Book_ticket</td>
<td>x: y</td>
<td>p: q</td>
</tr>
<tr class="bg-white text-dark">
<td>Book_train</td>
<td>r: s</td>
<td>t: u</td>
</tr>
</tbody>
</table>