Material-ui: [Table] thead border-bottom width doesn't resize when resize window

[xdvarpunen]

Hello,

I noticed the border-bottom width does not resize when resizing window. To repeat this create simple table and then open browser window as default with small size and put it to fullscreen.

-XDVarpunen

[EloB]

It's also on your docs page.

[kinglion]

<TableHeader style={{borderBottom : 'none'}}>
<TableRow style={{borderBottom : 'none'}}>

can solve it but no good

[ledsun]

I found minimum reproduce code.

code

``` index.html

Resize the window and this document wraped and height of this document is changed. So, the table will move but the bottom boder of the table will not move.

header

# browsers

This is reproduced  on the Chrome 51.0.2704.103.

![out](https://cloud.githubusercontent.com/assets/1079508/16836929/3bc52714-49fb-11e6-99bf-4ff79b267783.gif)

This is not reproduced on the Firefox 46.0.

# styles

transform: translate3d(0px, 0px, 0px);

is used in a `button` tag on [Table - Material-UI](http://www.material-ui.com/#/components/table)

position: relative;
```

is set in material-ui/TableHeaderColumn.js at master · callemall/material-ui

Question

Is position: relative; necessary?

[ledsun]

There is a limited workaround.

1. Set TableHeaderColumn style {{position: "static"}}
2. Hide all checkboxes

For example:

const TableExampleSimple = () => (
  <Table>
    <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
      <TableRow>
        <TableHeaderColumn style={{
          position: "static"
        }}>ID</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody displayRowCheckbox={false}>
      <TableRow>
        <TableRowColumn>1</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>
)

Demo

Source codes for demo

``` index.html

Sapmle for #3687

Resize the window and this document wraped and height of this document is changed. So, the table will move but the bottom boder of the table will not move.

<div style="transform: translate3d(0px, 0px, 0px);">
</div>
<div id="container">
</div>

<script src="bundle.js" charset="utf-8"></script>

``` index.jsx
const React = require('react');
const ReactDOM = require('react-dom');
const {getMuiTheme, MuiThemeProvider} = require('material-ui/styles');
const {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHeaderColumn,
  TableRowColumn
} = require('material-ui');

const FixedTableExample = () => (
  <Table>
    <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
      <TableRow>
        <TableHeaderColumn style={{
          position: "static"
        }}>ID</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody displayRowCheckbox={false}>
      <TableRow>
        <TableRowColumn>1</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>
)

const BrokenTableExample = () => (
  <Table>
    <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
      <TableRow>
        <TableHeaderColumn style={{
          position: "relative"
        }}>ID</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody displayRowCheckbox={false}>
      <TableRow>
        <TableRowColumn>1</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>
)

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <div>
      <h2>FixedTableExample</h2>
      <FixedTableExample/>
      <h2>BrokenTableExample</h2>
      <BrokenTableExample/>
    </div>
  </MuiThemeProvider>
)

ReactDOM.render(
  <App/>, document.querySelector('#container'))

The limitation

If you show checkboxes, their th element has a style of position: relative.
This issue is reproduced on the column for checkboxes.

[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.

[The-Code-Monkey]

@oliviertassinari This is still broken on V1 branch as of today as I have a Table > TableBody > TableRow > TableCell and in table cell input but I resize the page and it doesnt wrap them or anything. Why does it do this I can provide code if need be.

Is there any way of fixing this as the ways above no longer work in V1