css - 如何使用 CSS 使我的表格不超过我的卡片宽度？

问题描述

我正在对卡片内的桌子进行响应，但是在小尺寸下，由于桌子的宽度，卡片的桌子输出超过了我尝试多次解决这个问题的卡片，比如放 flex给父母并试图将桌子宽度与卡片相等但没有工作卡片应始终保持居中并位于卡片内部
这是错误的图片：https ://www.screencast.com/t/25bnSngK
这是应该如何看待的图片：https ://www.screencast.com/t/dK683SPzO
`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    rel="stylesheet" />
    <!-- Our css -->
    <title>ABOUT</title>
    <style>

        /*----------------Styles for the fonts----------------*/
        .museo-sans-900{
            font-family: museo-sans, sans-serif;
            font-style: normal;
            font-weight: 900;
       }
       .museo-sans-700{
            font-family: museo-sans, sans-serif;
            font-style: normal;
            font-weight: 700; 
       }
       .museo-sans-500{
            font-family: museo-sans, sans-serif;
            font-style: normal;
            font-weight: 500; 
       }
       /*------------------------------------------------------*/
       /*----------------------Colours-------------------------*/
       .Riverbed-orange{
            color: #FF6900;
       }
       .Riverbed-black{
           color: #3D3D3D ;
       }
       /*------------------------------------------------------*/
        body  {
            background-image: url("images/about_page_bgd.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            align-items: center;
            background-size: cover;
            background-position: center;
        }
        
        .title{
            color: #3D3D3D;
            margin-top: 34px;
        }
       .orange-container{
            position: relative;    
            text-align: center ;
       }
       
       .orange-container .sub-title{
            position: absolute;
            z-index: 999;
            margin: 0 auto;
            transform: translate(-50%, -50%);
            left: 0;
            right: 0;
            top: 50%;
            left: 50%;
            text-align: center;
            width: 60%; /* Set the width of the positioned div */
            color: white;
        }
        .introduction{
            margin-left: 115px;
            margin-right: 125px; 
        }

        hr{
            border: 1px solid #AB989D;
            width: 100%;
        }
       td {
            text-align: center !important; 
            width: 25% ;
        }
        .outlined-btn {
            border: 4.77px solid var(--unnamed-color-ff6900);
            border: 5px solid #FF6900;
            border-radius: 24px;
            max-width: fit-content;
            background: white;
            width: 100%;
        }
        .outlined-btn:hover{
            color: #FF6900;
            width: 100%;
        }
        div > .outlined-btn {
            width: 100% ;
            position: relative;
        }
       
        /* ============== Media Queries ================== */

        /* Small devices (landscape phones, 576px and up) */
        @media (max-width: 576px) { 
            
        }

        /* Medium devices (tablets, 768px and up) */
        @media (max-width: 768px) {
          
            .sub-title{
                font-size: 1em !important;
            }
            .title{
                font-size: 1.17em !important;
            }
         
        }

        /* Large devices (desktops, 992px and up) */
        @media (max-width: 992px) {
            .introduction{
                margin-left: 10%;
                margin-right: 10%; 
            }
            img{
                width: 80%;
            }
        }

        /* Extra large devices (large desktops, 1200px and up) */
        @media (max-width: 1200px) {
            .sub-title{
                font-size: 1.17em;
            }
            .title{
                font-size: 1.5em;
            }
            
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row d-flex justify-content-center">
            <div class="col-lg-8 col-md-8 col-sm-8 col-10">
                <div class="card">
                    <h1 class="title mx-auto museo-sans-900"><span class="d-flex justify-content-center">ABOUT THE RIVERBED</span>GLOBAL USER CONFERENCE</h1>
                    <div class="orange-container">
                        <img src="images/about_page_ribbon.svg" width="75%">
                        <h2 class="mx-auto sub-title museo-sans-700 my-auto">LEARN. CONNECT. EXPLORE.</h2>
                    </div>
                    <div class="museo-sans-500 introduction">
                        <p>Today, organizations are hyper focused on 1) accelerating digital transformation, 2) enabling work-from-anywhere models, and 3) strengthening operational resilience. The success or failure of these strategic priorities depends largely on digital technologies and the performance of IT infrastructure that must deliver and secure these technologies.</p>
                        <p>As technology professionals and IT practitioners, now is the time for you to lead your organization through change.</p>
                       
                        
                            <table class="table table-borderless ">
                                <thead>
                                <tr>
                                    <th scope="col" class=" border-right border-left border-top border-bottom text-center text-white" style="background: #FFB022;">8:30 – 9:00</th>
                                    <th scope="col" class=" border-right border-left border-top border-bottom text-center text-white" style="background: #FF6900;;">9:00 – 11:00</th>
                                    <th scope="col" class="border-right border-left border-top border-bottom text-center text-white" style="background: #FFB022;">11:00 – 5:00</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="border-right border-left border-bottom Riverbed-black"><strong>Open Networking<br><br> Hall <br><br> Info Desk <br><br> Chat<br><br></strong></td>
                                    <td class="border-right border-left border-bottom Riverbed-black"><strong> Welcome<br><br>  Keynotes <br><br>Roadmap<br><br></td></strong>
                                    <td class="border-right border-left border-bottom Riverbed-black"><strong>35+ Performance and Visibility Technical Sessions<br><br> Sessions featuring Microsoft, Gigamon, Netskope <br><br> Customer Stories and Use Cases<br><br> </strong></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                     
                    </div>
                    <br>
                    <br>
                </div>
                <br>
            </div>
        </div>           
    </div>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


</body>
</html>
标签： cssbootstrap-4
css - 如何使用 CSS 使我的表格不超过我的卡片宽度？

问题描述

解决方案

推荐阅读
