html - 100% 宽度的子表扩展父表
问题描述
目前我正在尝试创建一个子表,其宽度可以超过父表的 100%。因此他们应该有一个滚动条。但是,当我用我的以下 css 尝试这个时,孩子有一个滚动条,并且由于某种原因扩展了父容器的宽度。如果我使用像 500px 这样的静态尺寸,它工作正常,但它以 100% 的宽度失败。
HTML
(简化)
<main class="main">
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
</main>
CSS
(简化)
.main {
margin: 0 10%;
padding: 00;
width: 80%;
display: table;
}
table {
margin: 0;
padding: 0;
width: 100%;
display: block;
overflow-x: auto;
white-space: nowrap;
}
片段
静态宽度为 500px 的示例
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
background-color: green;
}
.main {
margin: 0 10%;
padding: 00;
width: 80%;
display: table;
}
table {
margin: 0;
padding: 0;
width: 500px;
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<main class="main">
<table>
<tr>
<td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
</main>
</body>
</html>
动态宽度为 100% 的示例
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
background-color: green;
}
.main {
margin: 0 10%;
padding: 00;
width: 80%;
display: table;
}
table {
margin: 0;
padding: 0;
width: 100%; /* PROBLEM */
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<main class="main">
<table>
<tr>
<td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
</main>
</body>
</html>
谢谢!
解决方案
您需要使用table-layout:fixed;
ref。自动布局可能会产生意想不到的结果。
固定表布局
使用这种(快速)算法,表格的水平布局不依赖于单元格的内容;它仅取决于表格的宽度、列的宽度以及边框或单元格间距。
作为旁注,无论有没有都会发生同样的问题width:100%
body {
margin: 0;
padding: 0;
width: 100%;
background-color: green;
}
.main {
margin: 0 10%;
padding: 00;
width: 80%;
display: table;
}
table {
margin: 0;
padding: 0;
display: block;
overflow-x: auto;
white-space: nowrap;
}
<main class="main">
<table>
<tr>
<td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
</main>
<main class="main" style="table-layout: fixed;">
<table>
<tr>
<td>A very very very veeeeeeeeeeeeeeeeeeeeery loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
</main>
推荐阅读
- node.js - 通过 Child_Process 在 Electron 中安装 Homebrew 作为依赖项
- c# - 为开发环境设置 Azure 搜索
- python - 使用 Docker for windows 从 Python 脚本创建 docker 映像时无法获取包含数据的输出文件
- android - 我无法应用自定义脚本插件
- deployment - pycharm 版本控制和部署
- python - 烧瓶 g 对象是否有超时?
- excel - 在 Excel 中运行 VBA 宏 - 保存文件时出错
- xml - 如何转义 XML 字符串并通过 jq 将其作为 JSON 中的值插入?
- json - 来自 Dockerfile 中参数的 JSON 字符串插值
- ios - iphone XR、XS Max 上的modalPresentationStyle formSheet 问题