如何使用CSS使我的表不超过我的卡宽？
如何使用CSS使我的表不超过我的卡宽？
提问于 2020-09-25 15:41:26
我正在做我的表的响应，那是在一张卡内，但是在小尺寸的情况下，由于表的宽度而导致的表出超出了我多次尝试解决这个问题的卡，比如把挠曲放到父母的身上，试图把表的宽度与卡的宽度相等但不起作用，卡片应该始终保持中心和卡的内部。
这是错误的图片：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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-09-25 15:50:54
问题在于你的长篇大论试图适应一个更小的空间。尝试在css文件中添加以下内容
.table-borderless td {
word-break: break-word;
}提示:对于较小的设备，考虑将td中的填充减少到约padding: 0.25rem;。也许降低字体的大小也会有帮助。
Stack Overflow用户
发布于 2020-09-25 16:03:38
你在包含卡片的父div上放了一个col 8。这意味着对于小屏幕，这个div不能超过其父级宽度的2/3 )。这似乎没有给出足够的宽度来包含表。
正如贝基在回答中所示，你可以通过打开单词中断来使表变小，但我发现，通过将col 8改为col 9或col 10，使包含的div稍微变宽，会得到一个更好的结果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64067308
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号