CSS显示：表格单元格，设置高度和溢出：隐藏，不起作用？

Posted 2023-02-25

【中文标题】CSS显示：表格单元格，设置高度和溢出：隐藏，不起作用？

【英文标题】：CSS display:table-cell, set height and overflow:hidden, doesn't work?

【发布时间】：2016-08-04 03:59:02

【问题描述】：

如果子元素的内容太大，我想剪裁一个元素，但它不适用于display:table-cell 元素。这是一个关于 JsFiddle 的例子：

JSFiddle

.table
    display: table;
    table-layout: fixed;
    width: 100%;
    height:200px;

.cell
      display: table-cell;
      vertical-align: top;
      position: relative;
      height:200px;
      overflow:hidden;

.container
  height:100%;
  background-color:red;

.container img
  display:block;

<div class="table">
    <div class="cell">
        <div class="container"> 
          <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
           <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
            <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
        </div>
    </div>

有人请告诉我我哪里错了吗？谢谢！

【问题讨论】：

您不能将高度应用于display: table-cell 容器。因此，改为将高度应用于 .container 元素。喜欢.container height: 200px 。

【参考方案1】：

为了让它工作，我们必须对表格使用 position:relative，对表格单元格项目使用 position:absolute。同样在您的代码中，我删除了 container's height: 100% ，这是没有用的。这是预览和fiddle。

.table
    display: table;
    table-layout: fixed;
    width: 100%;
    height:200px;
    position: relative;

.cell
      display: table-cell;
      vertical-align: top;
      position: absolute;
      height:200px;
      width: 100%;
      overflow-y:scroll;
      overflow-x: hidden;

.container
  background-color:red;

.container img
  display:block;

<div class="table">
    <div class="cell">
        <div class="container"> 
          <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
           <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
            <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />
        </div>
    </div>

【讨论】：

我知道怎么解决这个问题，我不知道我为什么要设置高度，设置溢出，但它不起作用......

【参考方案2】：

更改您的 css 显示类型。

.table
    display:block;
    width: 100%;
    height:200px;

.cell
  display:block;
  vertical-align: top;
  position: relative;
  height:200px;
  overflow:hidden;

.container
  height:100%;
  background-color:red;

.container img
  display:block;

fiddle here