需要在servicenow中设计表的帮助

Question

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

任何人都可以帮我这个忙

Answer 1

尝试一下。

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

Answer 2

请找到以下答案。如果有帮助，请对其进行投票。

我正在详细说明答案。

对于我们的bootstrap和bootstrap-javascript，我们必须将其包含在文件。因此，我包括了bootstrap 4.4，并在代码，我已经添加了javascript文件。（请参阅here更多）

然后设计表格，我们使用html标记来完成。然后要添加样式，我们可以包含引导程序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">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

需要在servicenow中设计表的帮助

问题描述投票：0回答：2

2个回答

最新问题

需要在servicenow中设计表的帮助

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2