html - 与内容宽度相关的 Flex 表头
问题描述
目前所有列的宽度相同。我希望具有“X”内容的第一列缩小到其中内容的宽度,但不对其宽度进行硬编码。
为空的标题列也应该尊重内容的宽度。
.table__row{
display: flex;
}
.table__column {
border: 1px solid blue;
display: flex;
flex-basis: 0;
flex-grow: 1;
align-items: center;
justify-content: center;
max-width: 100%;
padding: 12px;
overflow: hidden;
text-align: center;
}
<div class="table">
<div class="table__row -header">
<div class="table__column"></div>
<div class="table__column">Day</div>
<div class="table__column">Time</div>
</div>
<div class="table__row">
<div class="table__column">
<a href="#">X</a>
</div>
<div class="table__column">Monday</div>
<div class="table__column">12:00</div>
</div>
<div class="table__row">
<div class="table__column">
<a href="#">X</a>
</div>
<div class="table__column">Tuesday</div>
<div class="table__column">13:20</div>
</div>
</div>
解决方案
这应该有效。基本上,您需要为该“列”中的元素将 flex-grow 设置为 0。
.table__row{
display: flex;
}
.table__column {
border: 1px solid blue;
display: flex;
flex-basis: 0;
flex-grow: 1;
align-items: center;
justify-content: center;
max-width: 100%;
padding: 12px;
overflow: hidden;
text-align: center;
}
.shrink {
flex-grow: 0;
}
<div class="table">
<div class="table__row -header">
<div class="shrink table__column"></div>
<div class="table__column">Day</div>
<div class="table__column">Time</div>
</div>
<div class="table__row">
<div class="shrink table__column">
<a href="#">X</a>
</div>
<div class="table__column">Monday</div>
<div class="table__column">12:00</div>
</div>
<div class="table__row">
<div class="shrink table__column">
<a href="#">X</a>
</div>
<div class="table__column">Tuesday</div>
<div class="table__column">13:20</div>
</div>
</div>
推荐阅读
- ubuntu - fail2ban gitlab UI 登录尝试
- docker - 使用 docker 容器的 AEM OSGI 包 | 我应该安装哪些表单添加到包中?
- javascript - 预渲染单个 vue 组件而不是路由
- c - 使用 HeapDestroy 时是否需要 CloseHandle?
- idl-programming-language - 在 for 循环中跳过缺失值
- python - python中的rpy2动态时间扭曲(dtw) - 窗口不起作用
- css - 从父div中选择2级以下的子元素
- jquery-validate - Google reCaptcha + 自定义表单验证:我可以同步运行 .execute() 吗?
- c# - PHP中的64个二进制字符串到16个字符的十六进制
- javascript - 有没有办法使用从我计算机上的不同文件夹调用的 CSS 来编辑 svg?