如何实现边框扩展至最高内容的等宽表格单元格？支持多技术方案

没问题！针对你的需求，我给你整理了三种兼容Firefox、Chrome和IE11的实现方案，完美解决你之前遇到的「高度匹配+外边距+边框」的矛盾问题：

方案1：Flexbox（推荐，代码简洁） #

Flexbox天生支持等高布局，IE11也能完美兼容（只需加少量前缀）。我们可以通过内边距实现内容与边框的间距，外边距直接用margin，再配合box-sizing确保元素宽高计算正确：

<style>
.flex-container {
  display: -ms-flexbox; /* 兼容IE11 */
  display: flex;
  width: 100%;
}
.flex-item {
  -ms-flex: 1; /* 兼容IE11 */
  flex: 1;
  margin: 0 10px; /* 单元格之间的外边距 */
  border: 1px solid #ccc; /* 单元格边框 */
  padding: 15px; /* 内容与边框的间距 */
  box-sizing: border-box; /* 确保padding和边框不撑宽元素 */
}
</style>
<div class="flex-container">
  <div class="flex-item">
    这里是第一列的长内容，可能很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长
  </div>
  <div class="flex-item">
    这里是第二列的短内容
  </div>
</div>

这个方案里，flex:1让两个单元格自动等宽，display:flex默认就会让所有子元素高度匹配最高的那个，完全不用额外处理高度问题。

方案2：Bootstrap 3 适配你的原有代码 #

你之前用Bootstrap的row和col时，遇到的问题是「加div有外边距但高度不匹配，去掉div高度匹配但丢外边距」——其实只需给row和col加一点Flex相关的样式，就能两全其美：

<style>
.equal-height-row {
  display: -ms-flexbox; /* 兼容IE11 */
  display: flex;
  flex-wrap: wrap; /* 保留Bootstrap的响应式换行 */
}
.equal-height-row [class*="col-"] {
  display: -ms-flexbox; /* 兼容IE11 */
  display: flex;
  -ms-flex-direction: column; /* 兼容IE11 */
  flex-direction: column;
}
.cell-content {
  border: 1px solid #ccc;
  padding: 15px;
  margin: 0 10px; /* 内容的外边距 */
  flex: 1; /* 让内容区域自动撑满列的高度 */
}
</style>
<div class="container">
  <div class="row equal-height-row">
    <div class="col-xs-6">
      <div class="cell-content">
        这里是第一列的长内容，可能很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长
      </div>
    </div>
    <div class="col-xs-6">
      <div class="cell-content">
        这里是第二列的短内容
      </div>
    </div>
  </div>
</div>

思路是把row变成Flex容器，col设置为垂直方向的Flex布局，然后给内容div加flex:1，让它自动填充列的剩余高度，这样既保留了Bootstrap栅格的响应式特性，又实现了等高+外边距的需求。

方案3：标准HTML表格（极致兼容） #

如果需要兼容非常老旧的浏览器（比如IE11之前的版本），表格是最稳妥的选择——表格单元格天生就是等高的，我们可以用border-spacing实现单元格之间的间距：

<style>
.table-container {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px; /* 单元格之间的间距，替代外边距 */
}
.table-container td {
  width: 50%; /* 确保两列等宽 */
  border: 1px solid #ccc;
  padding: 15px; /* 内容与边框的间距 */
}
</style>
<table class="table-container">
  <tr>
    <td>
      这里是第一列的长内容，可能很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长
    </td>
    <td>
      这里是第二列的短内容
    </td>
  </tr>
</table>

这个方案完全不需要担心高度匹配问题，所有浏览器都能完美渲染，唯一的缺点是响应式布局需要额外处理，但你的测试环境是IE11，这个方案完全够用。

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