Material-ui: [表] 材料中的固定头

我今天遇到了同样的问题。 0.15 版有fixedHeader属性，v 1.x 没有。 我认为有计划将其纳入。

同样的问题Material-ui v1.0.0-beta.16 。

能恢复这个功能真是太好了！

Material-ui v1.0.0-beta.33 同样的问题

这是一个必须有的功能！ 我认为任何使用数据网格的人都会同意我的观点。

@mariorubinas如果此功能对您很重要，请考虑提交 PR。 如果您想讨论您的方法，可以使用此问题。

这是必备功能！！ 该功能在旧 MUI 版本中运行良好。

@asrane期待您的拉取请求。

嘿@mbrookes ，我使用了足够的固定表头，并且像其他所有关于 1.0 的内容一样，我将对此进行尝试——您/Material-UI 组织是否有固定表头的首选方法？ 旧的fixedHeader很棒，但我不是它如何使所有列等宽（ table-layout: fixed; ）的最大粉丝，所以我打算尝试重新实现它以支持动态列宽。

@tambling那太好了！ 对动态列宽的支持将是理想的。

需要注意的是，标题可以固定定位：

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

@oliviertassinari谢谢，它有效。

@oliviertassinari表格单元格中的按钮覆盖表格标题。 如何解决？
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam您需要调整按钮的 zIndex。

@mbrookes按钮的 zIndex 值应该是多少才能正常显示和运行？
这是演示
https://codesandbox.io/s/qx24l9vrz6

@pranayyelugam您可以轻松地在粘性标题上设置 z-index ，它将获得您想要的预期结果。

head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0,
    zIndex: 10,
  }

用于基准测试： https://vuematerial.io/components/table。

@oliviertassinari ，但这在 IE 11 上不起作用，对吧？ 从技术上讲，Material UI 支持 IE 11。是否有适用于 IE 11 的解决方案？

有没有人有一个解决方案来修复<Dialog>组件内的表头？ position: sticky不工作。

似乎不适用于 Chrome

我在这个组件中有一个固定的标题： https ://github.com/SurLaTable/slt-ui/blob/develop/src/ComparisonChart/ComparisonTable/ComparisonTable.js

材质 UI 3.xx！

仍然没有固定的标题？ IMO 其重要特征..)

撞！

对此有任何想法吗？ 我正在使用材料表，但是当滚动出现时我无法修复标题。

只需使用我的示例中的两个表，@mhidalgop。

只需使用我的示例中的两个表，@mhidalgop。

对不起，但这对我不起作用:(

对不起，但这对我不起作用:(

@mhidalgop ，介意在 CodeSandbox 中分享您的示例吗？

最后，我使用此解决方案解决了我的问题：

head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0,
    zIndex: 10,
  }

谢谢！
:)

需要注意的是，标题可以固定定位：

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

这在桌面浏览器上运行良好，但是在移动浏览器上它不起作用。

需要注意的是，标题可以固定定位：

// ...

  head: {
    backgroundColor: "#fff",
    position: "sticky",
    top: 0
  }

// ...

        <TableHead>
          <TableRow>
            <TableCell className={classes.head}>

// ...

https://codesandbox.io/s/k0vwm7xpl3

这在桌面浏览器上运行良好，但是在移动浏览器上它不起作用。

我在网络应用程序中使用此解决方案，在带有 Chrome 的平板电脑中它工作正常。

粘性对我不起作用，所以关于如何修复表头的任何其他解决方案？

+1

将此样式应用于<TableContainer>时为我工作

    height: 100%;
    overflow-y: auto;