HTML表格元素（TABLE/TR/TD）默认样式恢复、获取及自适应问题

1. 恢复指定元素的浏览器默认样式 #

如果全局已给tr设置了统一样式（如tr { height: 50px; }），要让带.defaultRow类的tr恢复浏览器默认高度，可使用CSS的revert关键字：

/* 仅恢复单个属性的默认样式 */
tr.defaultRow {
  height: revert;
}

/* 若要恢复元素所有属性的默认样式，使用all关键字 */
tr.defaultRow {
  all: revert;
}

revert会将属性值重置为浏览器原生默认样式，区别于initial（属性的初始值，不一定等于浏览器默认）和unset（继承父元素值或初始值），是恢复浏览器默认样式的最优选择。

2. 获取元素的浏览器默认CSS值 #

由于getComputedStyle返回的是元素受当前页面样式影响后的计算值，要获取浏览器原生默认值，可通过创建一个未受自定义样式影响的临时元素实现：

function getBrowserDefaultStyle(tagName) {
  // 创建目标类型的临时元素
  const tempEl = document.createElement(tagName);
  // 添加到文档中（不添加则部分样式无法正确计算）
  document.body.appendChild(tempEl);
  // 获取临时元素的计算样式（即浏览器默认值）
  const defaultStyle = getComputedStyle(tempEl);
  // 按需提取特定属性，例如高度
  const defaultHeight = defaultStyle.height;
  // 移除临时元素
  document.body.removeChild(tempEl);
  return defaultStyle;
}

// 示例：获取tr的默认高度
const trDefaultStyle = getBrowserDefaultStyle('tr');
console.log(trDefaultStyle.height); // 输出浏览器默认的tr高度

临时元素未被页面自定义CSS选中，因此其计算样式即为浏览器原生默认值。

3. 实现类似表格单元格的自适应平分空间行为 #

要让多个元素自动平分可用空间，且随内部内容扩展自适应，推荐使用CSS Flexbox或Grid：

方案一：Flexbox（适配动态数量的子元素） #

<div class="equal-container">
  <div class="equal-item">短内容</div>
  <div class="equal-item">这是一段较长的内容，会触发元素自适应扩展</div>
  <div class="equal-item">普通内容</div>
</div>

.equal-container {
  display: flex;
  width: 100%; /* 确保容器占满可用宽度 */
}

.equal-item {
  flex: 1; /* 等价于 flex-grow:1, flex-shrink:1, flex-basis:0% */
  border: 1px solid #eee;
  padding: 8px;
}

flex:1让所有子元素平分容器可用空间，当子元素内容超出时，会自动扩展宽度容纳内容，同时保持其他元素尽量平分剩余空间，逻辑和表格单元格自适应一致。

方案二：Grid（适配固定或动态数量的子元素） #

.equal-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  width: 100%;
}

.equal-item {
  border: 1px solid #eee;
  padding: 8px;
}

repeat(auto-fit, minmax(0, 1fr))会自动根据容器宽度和子元素数量，让每个子元素平分空间，同样支持内容自适应扩展。

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