html - Overflow-X 不显示滚动条
问题描述
我有一个用来存放桌子的容器,我正在尝试应用 overflow-x 属性,但它有问题。我有一个工作的代码笔,我稍后会发布,但问题是它没有响应。当视口靠近它时,它只是“粘住”(我真的无法比这更好地解释它,但 Codepen 显示了它)。这是代码:
<section class='main-container'>
<h6>Users</h6>
<table>
<thead>
<tr>
<th class='name'>Name</th>
<th class='email'>Email</th>
<th class='role'>Role</th>
<th class='status'>Status</th>
<th class='alerts'>Alerts/Actions</th>
<th class='delete'></th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Joe Bob</td>
<td class='email'>bobjoe@me.com</td>
<td class='role'>This is the role</td>
<td class='status'>Approved</td>
<td class='alerts'>There's an alert</td>
<td class='delete'></td>
</tr>
<tr>
<td class='name'>Joe Bob</td>
<td class='email'>bobjoe@me.com</td>
<td class='role'>This is the role</td>
<td class='status'>Approved</td>
<td class='alerts'>There's an alert</td>
<td class='delete'></td>
</tr>
<tr>
<td class='name'>Joe Bob</td>
<td class='email'>bobjoe@me.com</td>
<td class='role'>This is the role</td>
<td class='status'>Approved</td>
<td class='alerts'>There's an alert</td>
<td class='delete'></td>
</tr>
<tr>
<td class='name'>Joe Bob</td>
<td class='email'>bobjoe@me.com</td>
<td class='role'>This is the role</td>
<td class='status'>Approved</td>
<td class='alerts'>There's an alert</td>
<td class='delete'></td>
</tr>
<tr>
<td class='name'>Joe Bob</td>
<td class='email'>bobjoe@me.com</td>
<td class='role'>This is the role</td>
<td class='status'>Approved</td>
<td class='alerts'>There's an alert</td>
<td class='delete'></td>
</tr>
</tbody>
</table>
</section>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
border: none;
color: #425563;
-webkit-tap-highlight-color: transparent;
}
.main-container {
--away-left: 20px;
--border-radius: 2px;
--shine-brand-blue: #425563;
--shine-gray-two: #eceeef;
--shine-gray-one: #f1f2f3;
display: flex;
width: calc(100% - 80px);
max-width: 600px;
margin-right: 40px;
margin-left: 40px;
margin-top: 40px;
background-color: #fff;
border-radius: var(--border-radius);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
flex-flow: column nowrap;
justify-content: flex-start;
overflow-x: scroll;
h6 {
font-size: 16px;
height: 50px;
font-family: var(--main-font);
color: var(--shine-brand-blue);
line-height: 40px;
width: 100%;
border-bottom: 1px solid var(--shine-gray-two);
padding-left: var(--away-left);
display: flex;
align-items: center;
justify-content: flex-start;
}
table {
margin: 25px 0;
width: calc(100% - 40px);
margin-left: 20px;
margin-right: 20px;
border-collapse: collapse;
th, td {
text-align: left;
border-bottom: 1px solid #e0e3e5;
&.name {min-width: 149px;}
&.email {min-width: 230px;}
&.role {min-width: 148px;}
&.status {min-width: 82px;}
&.alerts {min-width: 195px;}
&.delete {min-width: 15px;}
}
th {
font-size: 10px;
font-weight: 500;
color: #7d8d9a;
text-transform: uppercase;
}
td {
font-size: 12px;
font-weight: 500;
line-height: 50px;
color: var(--shine-brand-blue);
select {
height: 40px;
width: 90%;
min-width: 140px;
border-radius: var(--border-radius);
background-color: var(--shine-gray-one);
cursor: pointer;
}
}
tbody tr {
transition: all .3s;
&:hover { background-color: #f5f6f7; }
}
}
}
main.next-to-aside {
position: absolute;
top: 60px;
right: 0px;
}
我怎样才能让表格做出响应,而不是像在这个 Codepen 中那样“坚持”?: https ://codepen.io/adammcgurk/pen/aXyZxm
解决方案
所以我实际上不得不将桌子包裹在div
. 只使用 是section
行不通的,因为它包含更多的孩子而不仅仅是table
. 所以样板代码看起来像这样:
<style>
.responsive-table {
overflow-x: scroll;
}
</style>
<section class='main-container'>
<!-- other content -->
<div class='responsive-table'>
<table>
<!-- table content -->
</table>
</div>
</section>
推荐阅读
- java - 卡夫卡管理员超时
- git - GitHub CLI - 获取当前版本
- datetime - 让 mariadb 处理 mysql 之类的日期搜索(例如,日期为 2020-12-32)
- java - 无论如何在startActivity()之后放置完整的消息吗?
- java - 我们可以配置 Maven 为不同的模块使用不同的 JDK 版本吗?
- mysql - NOT IN 的替代方案?
- c# - C# LINQ 将复杂的连接字符串数据拆分为对象列表
- reactjs - 反应多个字段的表单验证
- python-3.x - 具有嵌套 for 循环条件的 Python Pandas 切片
- javascript - NodeJS 和 MongoDB 中的异步问题