如何在 servicenow 中设计表格答案

【问题标题】：How to design a table in servicenow如何在 servicenow 中设计表格
【发布时间】：2020-03-24 21:30:52
【问题描述】：

我是前端设计的新手，我想在Servicenow服务门户中设计一个如下所示的表格：

我正在尝试，但我没有得到正确的设计

<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。

【问题讨论】：

标签： html bootstrap-4 angular-ui-bootstrap servicenow

【解决方案1】：

我正在详细说明答案。

要使用 Bootstrap 和 bootstrap-javascript，我们必须将其包含在文件中。因此，我已经包含了 Bootstrap 4.4，并且在代码的最后，我添加了 JavaScript 文件。（更多信息请参考here）
然后设计一个表格，我们使用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

更新

我已经编辑了代码...

【讨论】：

它看起来不错，但是代码非常庞大并且包含很多href链接，如果您不介意，请帮我解释一下这些都需要诚实吗？我不知道该代码在说什么关于:(
@AbdulAzeez，我已经包含了一些解释。如果有帮助请标记为答案
@AbdulAzeez，观看 youtube 视频 - youtube.com/playlist?list=PL4cUxeGkcC9jE_cGvLLC60C_PeF_24pvv
最后一个问题先生，在第一行我想要一个单列行，告诉乘客姓名，它应该是没有列的整行。你能帮我怎么做吗
@AbdulAzeez，抱歉回复晚了。您能否详细说明一下 ypur 问题

【解决方案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>

【讨论】：

嗨@John Kreedam，谢谢你的工作非常好，但是先生，如果你不介意你能不能让我让外观更有吸引力？我知道这不是一个正确的提问方式，但我向先生道歉，因为我从来没有把手放在前端，所以很难思考有吸引力的设计:(
嗨@AbdulAzeez，如果你能准确地告诉我你需要做什么，我可以帮助你。如果我回答你的问题，请将我的回答作为选定的答案。