如何将Telerik RadGrid内部详情表与主表同侧放置且不改变主表高度

1 CSS层样式调整 #

通过绝对定位让详情表脱离原有文档流，不会撑开主表所在的行高，从根源上避免主表高度受详情表影响：

/* 给主表行添加相对定位作为详情表的定位锚点 */
tr.main-table {
  position: relative;
}
/* 清除详情表所在行的占位高度 */
tr.main-table + tr {
  height: 0;
  overflow: visible;
  border: none;
}
/* 清除详情表所在单元格的内边距和高度 */
tr.main-table + tr > td {
  padding: 0 !important;
  height: 0;
  border: none;
}
/* 定位详情表到主表右侧 */
table.detail-table {
  position: absolute;
  left: 2000px; /* 匹配主表宽度，对齐到主表右边缘 */
  top: 0;
  max-height: 600px; /* 按需设置最大高度，超出自动展示滚动条 */
  overflow-y: auto;
  z-index: 10; /* 避免被主表固定列遮挡 */
}

2 RadGrid控件配置优化 #

修改原有滚动配置，固定表格滚动高度，避免自适应高度被详情表影响，其余原有配置无需改动，不会干扰批量编辑、行选择等已有交互逻辑：

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="800px" />

3 可选交互优化：滚动同步 #

如果需要详情表跟随主表垂直滚动保持行对齐，可添加以下JS监听逻辑：

const grid = $find("<%= 你的RadGrid控件ID.ClientID %>");
grid.get_element().querySelector(".rgDataDiv").addEventListener("scroll", function(e) {
  document.querySelectorAll(".detail-table").forEach(detail => {
    detail.style.transform = `translateY(${-e.target.scrollTop}px)`;
  });
});

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