Chrome 25级旧浏览器下表格单元格文本填充剩余空间方案问询

约束条件 #

• 仅可使用Chrome 25左右版本，支持的CSS特性有限
• 必须保留3列表格结构，且第一列仅占用自身所需空间

需求目标 #

.info容器宽度随屏幕动态变化，表格单元格内的红色.box元素宽度同样动态变化，需实现：

• .text元素填充单元格剩余空间，不会将.box挤出父容器边界
• 文本单行显示，超出部分隐藏

当前问题 #

已尝试嵌套flex容器并设置flex: 1 1 0等方案，但文本仍会挤压.box，导致容器边界被突破

方案1：定位+表格固定布局（兼容性最优） #

利用table-layout:fixed强制表格按容器宽度分配列宽，结合绝对定位固定.box位置，.text通过margin预留空间：

修正后CSS

.info {
  width: 600px; /* 动态值 */
  background: lightgray;
  overflow: hidden;
}

.container {
  background: gray;
}

.table {
  display: table;
  width: 100%;
  table-layout: fixed; /* 关键：固定表格布局，避免列被内容撑开 */
}

.row {
  display: table-row;
}

.row :first-child {
  border-right: solid black 20px;
  width: auto; /* 第一列仅占自身内容宽度 */
}

.cell {
  display: table-cell;
}

.flex {
  position: relative;
  height: 40px; /* 可根据需求调整高度 */
}

.box {
  width: 300px; /* 动态值 */
  background: red;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 可选：添加省略号提示超出内容 */
  display: block;
  margin-right: 300px; /* 与.box宽度一致，预留空间 */
  line-height: 40px; /* 可选：垂直居中 */
}

HTML（无需修改）

<div class="info">
  <div class="container">
    <div class="table">
      <div class="row">
        <div class="cell">1.1</div>
        <div class="cell ">1.2</div>
        <div class="cell ">1.3</div>
      </div>
      <div class="row">
        <div class="cell">2.1</div>
        <div class="cell">
          <div class="flex">
            <div class="text">This is a text, too long to fit inside the container</div>
            <div class="box"></div>
          </div>
        </div>
        <div class="cell">2.3</div>
      </div>
    </div>
  </div>
</div>

方案2：兼容旧版Flex布局 #

Chrome 25已支持基础flex特性，调整属性确保.box不被压缩：

修正后CSS

.info {
  width: 600px; /* 动态值 */
  background: lightgray;
}

.container {
  background: gray;
}

.table {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.row {
  display: table-row;
}

.row :first-child {
  border-right: solid black 20px;
  width: auto;
}

.cell {
  display: table-cell;
}

.flex {
  display: flex;
  height: 40px;
}

.box {
  flex-shrink: 0; /* 关键：禁止.box被压缩 */
  width: 300px; /* 动态值 */
  background: red;
}

.text {
  flex: 1; /* 填充剩余空间 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 40px;
}

内容的提问来源于stack exchange，提问作者link