考虑这个样本。这是一个非常简单的 CSS 表格,有一行和三个几乎相同的单元格,每个单元格包含一个 1000x1000px 的黑色方块 max-width: 100%
,但是单元格中文本的长度因单元格而异。
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
max-width: 500px;
}
img {
max-width: 100%;
}
.title {
font-size: 4em;
}
<div class='table'>
<div class='row'>
<div class='cell'>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAARnQU1BAACxjwv8YQUAAAABc1JHQgCuzhzpAAAAA1BMVEUAAACnej3aAAAAkUlEQVR42u3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvgbsPwABNAyb4wAAAABJRU5ErkJggg==" alt="black 1000x1000px square" />
<div class='title'>1234567890 12345 67890</div>
</div>
<div class='cell'>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAARnQU1BAACxjwv8YQUAAAABc1JHQgCuzhzpAAAAA1BMVEUAAACnej3aAAAAkUlEQVR42u3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvgbsPwABNAyb4wAAAABJRU5ErkJggg==" alt="black 1000x1000px square" />
<div class='title'>12345 67890</div>
</div>
<div class='cell'>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAARnQU1BAACxjwv8YQUAAAABc1JHQgCuzhzpAAAAA1BMVEUAAACnej3aAAAAkUlEQVR42u3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvgbsPwABNAyb4wAAAABJRU5ErkJggg==" alt="black 1000x1000px square" />
<div class='title'>12 34567</div>
</div>
</div>
</div>
运行代码段并调整浏览器窗口的大小,以便某些文本需要换行到下一行。 (小于~800px 宽的视口(viewport)就足够了。)
实际:第一个单元格仍然很大,而第二个和第三个单元格的尺寸缩小。
预期:我预期(并希望)此表中的所有图像大小相同。
为什么会这样?怎样才能达到我预期的效果?
最佳答案
在表中,max-width
不会在所有情况下都有效,甚至 width
也可能根据内部内容的大小而变化。在您的示例中,如果您在每个单元格的 <div class='title'>
中删除或放置完全相同的文本,那么它将平均分配单元格,因为所有单元格的内容长度都完全相同。
如果你想在任何情况下保持等宽单元格,你可以申请:
.table {
display: table;
table-layout: fixed;
width: 100%;
}
将会发生的事情是浏览器将在数据加载之前呈现表格布局。它不会关心里面有什么,并且始终保持等宽单元格,除非您手动设置 CSS
width
,或者在标记中使用 <col>
或 <td width="nn">
。如果您希望表格宽度在需要时超出容器(在您的示例中为主体视口(viewport))。您可以申请:
.table {
display: inline-table;
}
关于html - CSS 显示 :table images in cells don't match height,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52431062/