如何仅用HTML/CSS实现左侧非全宽表格，自适应且内容适配边框

实现方案 #

存在的问题排查 #

1. 未设置全局盒模型，padding和边框会撑大元素实际宽度，导致溢出
2. .rectangle-13设置了固定80%宽度、固定26px高度，内容变化或容器收缩时容易变形
3. 没有配置文本溢出处理规则，长文本会突破边框
4. HTML结构存在多余的</div>闭合标签，可能引发布局异常

核心修改代码 #

CSS部分

/* 全局基础重置，建议放在CSS文件最顶部 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 1em 1em 0 1em;
  background: #FAFAFA;
  /* 如需固定在左侧占页面一半宽度，取消下面一行的注释即可 */
  /* width: 50%; */
}

.column {
  width: 50%;
  margin-bottom: 1em;
  /* 增加列间距避免内容贴边 */
  padding: 0 0.5em;
}

.title {
  font-size: 0.875rem;
  font-family: "Helvetica";
  color: darkblue;
  margin-bottom: 4px;
}

.rectangle-13 {
  display: block;
  background-color: white;
  /* 占满父容器可用宽度 */
  width: 100%;
  /* 用最小高度替代固定高度，内容多的时候可自动撑开 */
  min-height: 42px;
  padding: 8px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  /* 修复无效的阴影属性 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-family: "Helvetica";
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 26px;
  /* 长文本处理，二选一即可 */
  /* 方案1：允许文本折行，高度自动适配 */
  word-break: break-all;
  /* 方案2：单行展示，超出部分显示省略号 */
  /*
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  */
}

HTML部分修正

删除<div class="textentete">Mon Compte</div><br>后面多余的</div>标签，避免结构异常。

左侧布局适配 #

如果需要将整个信息模块放在页面左侧，只需要给.container设置你需要的宽度（比如固定宽度max-width: 600px或者百分比宽度width: 50%），配合页面整体的flex布局即可实现左右分栏，所有内容会随着容器宽度自动适配，不会出现溢出、变形问题。

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