移动端表格布局优化：兼顾边框与换行内边距的实现方案

你遇到的问题本质是CSS行内元素的渲染特性导致的：

• display: inline元素换行时，padding等装饰样式不会延续到断行的新内容上，所以第二行失去padding；
• display: inline-block元素会生成独立的块盒，padding会增加元素总宽度，超出单元格容器后就会出现边框断开、内容溢出的情况。

推荐方案：使用box-decoration-break: clone #

给包裹表格内容的元素添加以下样式，即可同时解决两个问题：

.cell-content {
  display: inline;
  padding: 8px;
  border: 1px solid #ddd;
  /* 关键：让样式在换行时克隆到每一行 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

这个属性会让行内元素的padding、边框等装饰，在内容换行时被复制到每一段断行的内容上，既保留了行内换行的特性，又保证每一行都有正确的padding和边框。

兼容旧浏览器的备选方案 #

如果需要兼容不支持box-decoration-break的浏览器，可以改用以下布局：

1. 移除表格单元格的padding，把padding转移到内部元素；
2. 内部元素设为块级，确保padding完全包裹内容：

td {
  padding: 0;
  border: 1px solid #ddd;
}
.cell-content {
  display: block;
  padding: 8px;
  word-wrap: break-word; /* 确保长内容自动换行 */
}

这种方式通过块级元素的特性，让padding和内容完全贴合，同时边框与单元格完美对齐，不会出现断开或溢出的问题。

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