ReactJS + Material-UI：如何减小 Material-UI 的 <TableRow/> 的列宽？

Posted 2023-02-22

【中文标题】ReactJS + Material-UI：如何减小 Material-UI 的 <TableRow/> 的列宽？

【英文标题】：ReactJS + Material-UI: How to reduce column width of Material-UI's <TableRow/>?

【发布时间】：2017-04-07 23:11:27

【问题描述】：

我目前正在使用 ReactJS + Material-UI，并且使用 Material-UI 的 <Table>，列的宽度会根据内容自动设置。目前它似乎在所有列上强制执行相同的宽度，但我希望某些列比其他列占用更多的宽度。

那么有没有办法任意分配<TableRow> 的列的宽度，并且仍然根据内容动态？

【参考方案1】：

根据@François Zaninotto @Lane Rettig 的回答

...

加上这个，你可以得到一个无限列的滚动表...

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
    

【讨论】：

这与列宽无关

【参考方案2】：

<Table> 组件中有一个隐藏的道具，使它的行为类似于 html <table> 元素，即根据内容调整列宽：

<Table style= tableLayout: 'auto'  fixedHeader=false ...>
    ...
</Table>

它不会让你一一设置列的样式，但至少默认情况下它比小内容的大列不那么难看。

【讨论】：

这很好，但请注意，如果它变得太宽/窗口变得太窄，它也会导致表格溢出屏幕边缘并变得不可见。更多有趣的评论在this thread。

【参考方案3】：

您可以设置 TableHeaderColumn 及其对应的 TableRowColumns 的样式。下面我将宽度设置为 12 像素（并将背景颜色设置为黄色，以进一步演示自定义样式）

工作 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')
);

【讨论】：

但这是硬编码的宽度，对吗？我一直在寻找一个会根据内容动态变化但仍比其他列宽的列。

您还可以使用 whiteSpace: 'nowrap', and/or minWidth/maxWidth

你能把完整的代码和空白一起显示吗？

你的内容是一行文字，还是可以换行？

你能展示这两种情况吗？因为，当窗口最小化时，内容实际上被包装了。