如何在servicenow中设计一个table

Question

我是前端设计新手，我想在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。

Answer 1

我正在详细说明答案。

要使用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>

For More

更新

我已经编辑了代码...

Answer 2

试试这个。

    <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

How to design a table in servicenow

html

servicenow

angular-ui-bootstrap

bootstrap-4