Как оформить стол в сервизе - PullRequest
Новая
       6

Как оформить стол в сервизе

0 голосов
/ 23 марта 2020

Я новичок в разработке внешнего интерфейса, хочу создать таблицу, как показано ниже на портале Servicenow Service:

enter image description here

Я пытаюсь из моя сторона, но я не получаю правильный дизайн 

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

Ответы [ 2 ]

2 голосов
/ 23 марта 2020

Я разрабатываю ответ.

  1. Чтобы использовать Bootstrap и bootstrap - javascript, мы должны включить его в файл. Таким образом, я включил Bootstrap 4.4 и в конце кода добавил файл JavaScript. (Подробнее см. здесь )

  2. Затем, чтобы создать таблицу, мы делаем это, используя теги html. Затем, чтобы добавить стили, мы можем включить Bootstrap классы .

  3. Подробнее см. Документацию 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>

Подробнее

Обновление

У меня есть отредактировал код ...

1 голос
/ 23 марта 2020

Попробуйте это. 

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