[Table] can't change row padding (top and bottom)

[davidtzoor]

Problem description

The Table component has a padding style assigned to it which can't be overridden. I tried setting the style attribute of the Table, TableHeader, TableRow and TableHeaderColumn with no success.

Steps to reproduce

Create any table and try setting the padding (top and bottom) for the header and row.
This is the table I created:

<Table>
    <TableHeader adjustForCheckbox={false} displaySelectAll={false} fixedHeader={true}>
        <TableRow>
            <TableHeaderColumn>id</TableHeaderColumn>
            <TableHeaderColumn>name</TableHeaderColumn>
            <TableHeaderColumn>number</TableHeaderColumn>
        </TableRow>
    </TableHeader>
    <TableBody showRowHover={true} displayRowCheckbox={false}>
        {data.map(item => {
            return (
                <TableRow key={item.id}>
                    <TableRowColumn>{item.id}</TableRowColumn>
                    <TableRowColumn>{item.name}</TableRowColumn>
                    <TableRowColumn>{item.number}</TableRowColumn>
                </TableRow>
            );
        })}
    </TableBody>
</Table>

Versions

• Material-UI: 0.15.2
• React: 15.2.1
• Browser: Chrome 52.0.2743.116 (64-bit)

I have asked a question regarding this issue in Stack Overflow (http://stackoverflow.com/questions/39210565/material-ui-change-rows-height-and-padding-in-table/39210737#39210737).

[wiseolddj]

@oliviertassinari
If you set the styles for padding-top and padding-bottom as a style you can set padding on the TableRow or the TableRowColumn

let myPaddingStyle = {
    paddingTop: 10,
    paddingBottom: 10,
}

<Table>
    <TableHeader adjustForCheckbox={false} displaySelectAll={false} fixedHeader={true}>
        <TableRow style={myPaddingStyle}>
            <TableHeaderColumn>id</TableHeaderColumn>
            <TableHeaderColumn>name</TableHeaderColumn>
            <TableHeaderColumn>number</TableHeaderColumn>
        </TableRow>
    </TableHeader>
    <TableBody showRowHover={true} displayRowCheckbox={false}>
        {data.map(item => {
            return (
                <TableRow key={item.id} style={myPaddingStyle}>
                    <TableRowColumn>{item.id}</TableRowColumn>
                    <TableRowColumn>{item.name}</TableRowColumn>
                    <TableRowColumn>{item.number}</TableRowColumn>
                </TableRow>
            );
        })}
    </TableBody>
</Table>

[oliviertassinari]

That padding doesn't seem to have any impact. Can't we just delete that line https://github.com/callemall/material-ui/blob/master/src/Table/Table.js#L13?
Still, I don't understand why you can't override it.

[oliviertassinari]

Following that answer on StackOverflow you can't apply a padding on a <table /> element.
See for another solution http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css.

I'm removing that style from our component with #5932.