[英]ReactJS + Material-UI: How to reduce column width of Material-UI's <TableRow/>?
I'm currently using ReactJS + Material-UI, and with the Material-UI's <Table>
, the columns width are automatically set depending on content.我目前正在使用 ReactJS + Material-UI,并且使用 Material-UI 的<Table>
,列宽会根据内容自动设置。 Currently it seems to enforce equal width on all columns, but I want some columns to take up more width than others.目前它似乎对所有列强制执行相等的宽度,但我希望某些列比其他列占用更多的宽度。
So is there a way to arbitrarily assign width of <TableRow>
's column and still be dynamic based on content instead?那么有没有一种方法可以任意分配<TableRow>
列的宽度,并且仍然是基于内容的动态?
You can set the style of the TableHeaderColumn and its corresponding TableRowColumns.您可以设置 TableHeaderColumn 及其对应的 TableRowColumn 的样式。 Below I set width to 12 pixels (and background color to yellow just to further demo custom styling)下面我将宽度设置为 12 像素(背景颜色设置为黄色只是为了进一步演示自定义样式)
working jsFiddle: https://jsfiddle.net/0zh1yfqt/1/工作 jsFiddle: https ://jsfiddle.net/0zh1yfqt/1/
const {
Table,
TableHeader,
TableHeaderColumn,
TableBody,
TableRow,
TableRowColumn,
MuiThemeProvider,
getMuiTheme,
} = MaterialUI;
class Example extends React.Component {
render() {
const customColumnStyle = { width: 12, backgroundColor: 'yellow' };
return (
<div>
<Table>
<TableHeader>
<TableRow>
<TableHeaderColumn>A</TableHeaderColumn>
<TableHeaderColumn style={customColumnStyle}>B</TableHeaderColumn>
<TableHeaderColumn>C</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableRowColumn>1</TableRowColumn>
<TableRowColumn style={customColumnStyle}>2</TableRowColumn>
<TableRowColumn>3</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>4</TableRowColumn>
<TableRowColumn style={customColumnStyle}>5</TableRowColumn>
<TableRowColumn>6</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>7</TableRowColumn>
<TableRowColumn style={customColumnStyle}>8</TableRowColumn>
<TableRowColumn>9</TableRowColumn>
</TableRow>
</TableBody>
</Table>
</div>
);
}
}
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Example />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('container')
);
There is a hidden prop in the <Table>
component that makes it behave like a HTML <table>
element, ie adapt the column widths to the content: <Table>
组件中有一个隐藏的 prop,使它的行为类似于 HTML <table>
元素,即根据内容调整列宽:
<Table style={{ tableLayout: 'auto' }} fixedHeader={false} ...>
...
</Table>
It doesn't let you style columns one by one, but at least it's less ugly than large columns for small contents by default.它不会让您一一设置列的样式,但至少在默认情况下,对于小内容,它没有大列那么难看。
according to the answer of @François Zaninotto @Lane Rettig根据@François Zaninotto @Lane Rettig 的回答
... ...
and adding with this ,you can get a scroll table with infinite columns...并添加这个,你可以得到一个带有无限列的滚动表......
componentDidMount() {
let tbody = $(this.refs.table)
if (tbody && tbody.length == 1) {
let div = tbody[0].refs.tableDiv
div.style.overflowX = 'auto'
div.parentElement.style.overflowX = 'hidden'
} else {
// error handling
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.