table header is not consistent with other rows.

[tehceen]

when the content inside row cell increases the table header is not more aligned with table data. have tried many tables but same issues .see screen shot

[jmo-jr]

Yeah, I'm having the same pain here! What's bizarre about it is that the widths are all declared via style property inside the <th>'s; those widths affect all the <td>'s nicely but strangely are completely ignored by the <th>'s themselves!

See above how the code shows style="width:66px" but the element is rendered with only 40px of width...

[johnkristijan]

Facts The documentation states that the tables are not ready for production.

Observations In my experience it works when setting table prop "md-fixed-header" to either true or false (cannot remember which of them that produced perfectly aligned columns, but you should try it out.

Workaround Anyways, if you need fixed headers and want columns to be aligned with their corresponding headers, one may attempt to write a javascript method that readjusts the widths after each "table change" with a watcher. An example method is shown below for anyone interested.

[mikedelcastillo]

If you need a dirty work around, you can call setWidth on each of the MdTableHead components. This can be improved but I have this method in my component that uses the MdTable.

forceSetWidth () {
    // Note: This is very inefficient and is only a workaround
    // Recursively get all children
    let components = []
    getComponents(this)

    function getComponents(component) {
        components.push(component)
        for (let child of component.$children) {
            getComponents(child)
        }
    }

    for (let component of components) {
        // Condition to filter MdTableHead components
        if (component.setWidth) {
            // Call setWidth on next tick
            this.$nextTick(component.setWidth)
        }
    }
}

Simply call the method when your table data changes. You can set a watcher for your data that calls this method.