[Table] Horizontal scrolling will move vertical scrollbar on tables with a lot of columns

[thomastvedt]

Problem Description

On tables with scrollable columns and rows, the vertical scrollbar isn't positioned correctly when scrolling horizontally, see picture:

It's fixed if I add the following bodyStyle to table (wrapper-div for inner table):

<Table bodyStyle={{width: '-fit-content'}} >

But it doesn't work in internet explorer.. And the vertical scrollbar is only visible if you scroll the horizontal scrollbar to the right.

From table.jsx render method:

return (
  <div style={prepareStyles(Object.assign(styles.tableWrapper, wrapperStyle))}>
    {headerTable}
    <div style={prepareStyles(Object.assign(styles.bodyTable, bodyStyle))} ref="tableDiv">
      <table className={className} style={mergedTableStyle} ref="tableBody">
        {inlineHeader}
        {inlineFooter}
        {tBody}
      </table>
    </div>
    {footerTable}
  </div>
);

Versions

• Material-UI: "material-ui": "0.15.0-alpha.2",
• React: "react": "^0.14.8",
• Browser: chrome, windows 10

[HongJheLi]

See #4396 solve the issue.

<Table bodyStyle={{overflow:'visible'}}>

Side effect

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.