我正在努力实现以下目标:
- 包含
div
内的 table
没有设置width
(可以是 100%),但它不能比包含的div
宽table
的单元格是固定宽度的(使用width
和/或max
/min
宽度
)table
单元格的width
比包含div
的宽度宽table
中的tbody
元素需要水平滚动
table
元素
这可能吗?在下面的代码片段中,您可以看到我想要实现的目标。容器的宽度为 200px
。 table
有 3 列,每列 100px
(总宽度为 300px
)。您可以看到容器的背景是红色的,并且比 table
宽度短。我的目标是让 tbody
的宽度保持在容器的宽度 (200px
) 并水平滚动溢出。
但是,我知道 table
和 tbody
元素的默认行为有一些规则可以防止这种情况发生。有没有一种方法可以配置它,以便 tbody
水平滚动溢出,无需在 tbody
元素中指定硬 width
?
.container-container {
background-color:#ccffcc;
}
.container {
background-color:#ffcccc;
width: 200px;
}
table {
border-collapse: collapse;
}
td {
width: 100px;
min-width: 100px;
background-color: #e0e0e0;
}
tbody {
display: block;
margin-top: 29px;
width:100%;
overflow: auto;
}
<div class="container">
<table id="callLogExplorer">
<tbody>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
</tbody>
</table>
</div>
最佳答案
不要设置 display:block
在 tbody
.只需将溢出放在 <table>
上parent,就像 Twitter Bootstrap 那样。它适用于跨浏览器/跨设备:
.tableResponsive {
background-color:#ffcccc;
overflow-x: auto;
width: 200px; /* or set max-width on it max-width: 100vw; */
}
#callLogExplorer {
margin-top: 29px;
}
table {
border-collapse: collapse;
}
td {
min-width: 100px;
background-color: #e0e0e0;
}
<div class="tableResponsive">
<table id="callLogExplorer">
<tbody>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
<tr>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
<td>asdfasd fas</td>
</tr>
</tbody>
</table>
</div>
关于html - 当 tbody 设置为其容器的宽度时,我可以在 tbody 的溢出上实现水平滚动吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44767832/