个人中心
gpt4 book ai didi

html - 如何在移动 View 中制作响应式表格

转载 作者：行者123 更新时间：2023-12-04 14:59:39 25 4
gpt4 key购买 nike

我遇到了一个简单的问题，无法在移动 View 中查看我的表响应
谁能告诉我如何使其在移动 View 中具有响应性，请告诉我，如果您有任何与我的问题相关的问题，请随时提问

tabel.html


这是我想要做出响应的表格，我正在使用引导框架来制作表格。 

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

最佳答案

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;
}
这是一款非常适合响应式表格的笔，在大多数情况下，表格没有响应。媒体查询查看设备的大小，并将其显示为块或无。

关于html - 如何在移动 View 中制作响应式表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67225064/

25 4 0
文章推荐： javascript - 我只想选择当前页面的所有记录
文章推荐： python - Pandas 应用 lambda 返回一个元组并插入到相应的列中
文章推荐： Python:如何根据星期几获取数据框中某个范围内的项目数？
文章推荐： c - x86-64 内核在设置 IDT 时崩溃
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com