title: how to make responsive table in mobile view
body: <p>I am stuck in a simple problem , am not able to view my table responsive in mobile view
  can anyone tell me how can I make it responsive in mobile view, please tell me, if you have any question related my problem please free fell to ask</p>
  <blockquote>
  <p>tabel.html</p>
  </blockquote>
  <p>This is my table where I want to make responsive i am using bootstrap framework for making a table.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;html&gt;
    &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
          &lt;link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
              integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /&gt;
          &lt;link rel="preconnect" href="https://fonts.gstatic.com"&gt;
          &lt;link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&amp;display=swap" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
              integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"&gt;
          &lt;title&gt;about Web&lt;/title&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
          &lt;!-- Navbar Start --&gt;
          &lt;nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" style="background-color: #cadefc !important; color:#798777;"&gt;
              &lt;div class="container"&gt;
                  &lt;a class="navbar-brand" href="index.html"&gt;Navbar&lt;/a&gt;
                  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="border: none;"&gt;
                      &lt;i class="fas fa-bars"&gt;&lt;/i&gt;
                  &lt;/button&gt;
      
                  &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
                      &lt;ul class="navbar-nav ml-auto"&gt;
                          &lt;li class="nav-item "&gt;
                              &lt;a class="nav-link" href="index.html"&gt;Home &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="index.html"&gt;Service&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="about.html"&gt;About Us&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="price.html"&gt;Price&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="team.html"&gt;Our Team&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="contact.html"&gt;Contact Us&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      
          &lt;!-- Navbar End --&gt;
          &lt;!-- Price section Start --&gt;
          &lt;section class="price mb-5" style="margin-top: 100px;" style=" overflow-x: scroll-bar; height:200px;"&gt;
              &lt;div class="container table-responsive" &gt;
                  &lt;table class="table table-bordered" style="width: 100%;"&gt;
                      &lt;thead class="thead-light"&gt;
                          &lt;tr&gt;
                              &lt;th scope="col"&gt;Package&lt;/th&gt;
                              &lt;th scope="col"&gt;Static&lt;/th&gt;
                              &lt;th scope="col"&gt;Intermediate&lt;/th&gt;
                              &lt;th scope="col"&gt;Dynamic&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;th scope="row "&gt;Price&lt;/th&gt;
                              &lt;td style="background-color: lightskyblue;"&gt;&lt;i class="fas fa-rupee-sign"&gt;&lt;/i&gt; &lt;/td&gt;
                              &lt;td style="background-color: lightgreen;"&gt;&lt;i class="fas fa-rupee-sign"&gt;&lt;/i&gt; &lt;/td&gt;
                              &lt;td style="background-color: lightcoral;"&gt;&lt;i class="fas fa-rupee-sign"&gt;&lt;/i&gt; &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;No of Pages&lt;/th&gt;
                              &lt;td&gt;4&lt;/td&gt;
                              &lt;td&gt;6&lt;/td&gt;
                              &lt;td&gt;12&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;Mobile Tablet Friendly&lt;/th&gt;
                              &lt;td&gt;&lt;i class="far fa-check"&gt;&lt;/i&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;i class="far fa-check"&gt;&lt;/i&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;i class="far fa-check"&gt;&lt;/i&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;Inquiry Page&lt;/th&gt;
                              &lt;td&gt;-&lt;/td&gt;
                              &lt;td&gt;&lt;i class="far fa-check"&gt;&lt;/i&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;i class="far fa-check"&gt;&lt;/i&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;Design Quality&lt;/th&gt;
                              &lt;td style="color: gray;"&gt;Basic&lt;/td&gt;
                              &lt;td style="color: gray;"&gt;Intermediate&lt;/td&gt;
                              &lt;td style="color: gray;"&gt;Creative&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;Social Media Link Integration&lt;/th&gt;
                              &lt;td&gt;-&lt;/td&gt;
                              &lt;td&gt;-&lt;/td&gt;
                              &lt;td&gt;&lt;i class="far fa-check"&gt;&lt;/i&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;Whatsapp Integration&lt;/th&gt;
                              &lt;td&gt;-&lt;/td&gt;
                              &lt;td&gt;-&lt;/td&gt;
                              &lt;td&gt;&lt;i class="far fa-check"&gt;&lt;/i&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;Extra pages&lt;/th&gt;
                              &lt;td style="color: gray;"&gt;Rs 200 for Each page&lt;/td&gt;
                              &lt;td style="color: gray;"&gt;Rs 300 for Each page&lt;/td&gt;
                              &lt;td style="color: gray;"&gt;-&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;Time Period&lt;/th&gt;
                              &lt;td style="color: gray;"&gt;4 days&lt;/td&gt;
                              &lt;td style="color: gray;"&gt;7 days&lt;/td&gt;
                              &lt;td style="color: gray;"&gt;negotiation&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;&lt;/th&gt;
                              &lt;td&gt;&lt;a href="https://ashish-45.github.io/static-serviceWebsite/#"&gt;&lt;button
                                          class="btn btn-primary"&gt;View Sample&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;a href="https://ashish-45.github.io/SimpleDynamic/"&gt;&lt;button class="btn btn-success"&gt;View
                                          Sample&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;a href="https://ashish-45.github.io/static-serviceWebsite/#"&gt;&lt;button
                                          class="btn btn-danger"&gt;View Sample&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;!-- price section end --&gt;
      
          &lt;!-- end --&gt;
      
          &lt;!-- footer start --&gt;
          &lt;div class="footer bg-dark"&gt;
              &lt;p class="text-center text-white mb-3 p-3"&gt;© 2021 abc solution All rights reserved.&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- footer end --&gt;
      
          &lt;script src="index.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
              integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
              crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
              integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
              crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
              integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
              crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/body&gt;
      
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>