how to make responsive table in mobile view

user_14772642 0
Viewed 1974

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

tabel.html

This is my table where I want to make responsive i am using bootstrap framework for making a table.

  <html>
  <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
            integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
        <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">
        <title>about Web</title>
    </head>
    
    <body>
        <!-- Navbar Start -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" style="background-color: #cadefc !important; color:#798777;">
            <div class="container">
                <a class="navbar-brand" href="index.html">Navbar</a>
                <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;">
                    <i class="fas fa-bars"></i>
                </button>
    
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item ">
                            <a class="nav-link" href="index.html">Home </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="index.html">Service</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="about.html">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="price.html">Price</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="team.html">Our Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.html">Contact Us</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    
        <!-- Navbar End -->
        <!-- Price section Start -->
        <section class="price mb-5" style="margin-top: 100px;" style=" overflow-x: scroll-bar; height:200px;">
            <div class="container table-responsive" >
                <table class="table table-bordered" style="width: 100%;">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">Package</th>
                            <th scope="col">Static</th>
                            <th scope="col">Intermediate</th>
                            <th scope="col">Dynamic</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row ">Price</th>
                            <td style="background-color: lightskyblue;"><i class="fas fa-rupee-sign"></i> </td>
                            <td style="background-color: lightgreen;"><i class="fas fa-rupee-sign"></i> </td>
                            <td style="background-color: lightcoral;"><i class="fas fa-rupee-sign"></i> </td>
                        </tr>
                        <tr>
                            <th scope="row">No of Pages</th>
                            <td>4</td>
                            <td>6</td>
                            <td>12</td>
                        </tr>
                        <tr>
                            <th scope="row">Mobile Tablet Friendly</th>
                            <td><i class="far fa-check"></i></td>
                            <td><i class="far fa-check"></i></td>
                            <td><i class="far fa-check"></i></td>
                        </tr>
                        <tr>
                            <th scope="row">Inquiry Page</th>
                            <td>-</td>
                            <td><i class="far fa-check"></i></td>
                            <td><i class="far fa-check"></i></td>
                        </tr>
                        <tr>
                            <th scope="row">Design Quality</th>
                            <td style="color: gray;">Basic</td>
                            <td style="color: gray;">Intermediate</td>
                            <td style="color: gray;">Creative</td>
                        </tr>
                        <tr>
                            <th scope="row">Social Media Link Integration</th>
                            <td>-</td>
                            <td>-</td>
                            <td><i class="far fa-check"></i></td>
                        </tr>
                        <tr>
                            <th scope="row">Whatsapp Integration</th>
                            <td>-</td>
                            <td>-</td>
                            <td><i class="far fa-check"></i></td>
                        </tr>
                        <tr>
                            <th scope="row">Extra pages</th>
                            <td style="color: gray;">Rs 200 for Each page</td>
                            <td style="color: gray;">Rs 300 for Each page</td>
                            <td style="color: gray;">-</td>
                        </tr>
                        <tr>
                            <th scope="row">Time Period</th>
                            <td style="color: gray;">4 days</td>
                            <td style="color: gray;">7 days</td>
                            <td style="color: gray;">negotiation</td>
                        </tr>
                        <tr>
                            <th scope="row"></th>
                            <td><a href="https://ashish-45.github.io/static-serviceWebsite/#"><button
                                        class="btn btn-primary">View Sample</button></a></td>
                            <td><a href="https://ashish-45.github.io/SimpleDynamic/"><button class="btn btn-success">View
                                        Sample</button></a></td>
                            <td><a href="https://ashish-45.github.io/static-serviceWebsite/#"><button
                                        class="btn btn-danger">View Sample</button></a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
        <!-- price section end -->
    
        <!-- end -->
    
        <!-- footer start -->
        <div class="footer bg-dark">
            <p class="text-center text-white mb-3 p-3">© 2021 abc solution All rights reserved.</p>
        </div>
        <!-- footer end -->
    
        <script src="index.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
            integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
            crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
            integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
            crossorigin="anonymous"></script>
    </body>
    
    </html>

bootstrap-4 css html
2 Answers

https://codepen.io/geoffyuen/pen/FCBEg

.rwd-table {
  margin: 1em 0;
  min-width: 300px;
}
.rwd-table tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}

body {
  padding: 0 2em;
  font-family: Montserrat, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #444;
  background: #eee;
}

h1 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #34495E;
}

.rwd-table {
  background: #34495E;
  color: #fff;
  border-radius: .4em;
  overflow: hidden;
}
.rwd-table tr {
  border-color: #46637f;
}
.rwd-table th, .rwd-table td {
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    padding: 1em !important;
  }
}
.rwd-table th, .rwd-table td:before {
  color: #dd5;
}

This is a great pen for a responsive table, in most cases tables are not responsive. The media query looks at the size of the device and will display it as a block or none.

user_116302780

In most cases tables are not responsive friendly because of cell content and number of columns is big. So in those cases scrollbar at bottom is fine. But in your case you have only 4 columns - so you can use mediaquery in css and decrease font-sizes and th, td cells paddings and button sizes for mobile resolutions. Or use bootstrap classes for lower device resolutions.

Also please read rules and include code runner in question. Its not convenient to copy-paste and check on local.

user_142605520
Related