Material-ui: [表格]设置表格列宽

创建于 2015-10-19  ·  54评论  ·  资料来源: mui-org/material-ui

可以设置表格列的宽度吗?

DataGrid question

最有用的评论

在我的原始HTML表中,列宽是根据内容自动设置的。 material-ui似乎在所有列上强制使用相等的宽度。 有没有一种方法可以将列宽设置为动态,例如原始HTML表?

所有54条评论

+1

没什么特别的:

const colWidth {
    width: '2rem'
};

<TableRowColumn style={ colWidth }>
    ...
</TableRowColumn>
<TableRowColumn style={{ width: 100 }}>

TableHeaderColumn表现不太好

有什么方法可以根据内容动态分配col的宽度?

在我的原始HTML表中,列宽是根据内容自动设置的。 material-ui似乎在所有列上强制使用相等的宽度。 有没有一种方法可以将列宽设置为动态,例如原始HTML表?

@sanfilippopablo<Table>使用table-layout: 'fixed' CSS道具,导致所有列具有相同的宽度,并在每个表单元格上加上white-space: 'nowrap'来处理溢出。

您不能安全地切换到table-layout: 'auto'因为该表随其内容无限增长,除非您删除上述的空白CSS道具。 如果这样做,
您不能再使用fixedHeader={true}道具,因为标题随后包含在单独的表中: cry:。

一些反馈将不胜感激。

我一直在设置列的宽度是为了

样式,将表格布局设置为auto(如上所述),然后按百分比为列设置宽度。 即宽度30%,宽度70%。 这将是一个两列的布局示例,其中表标题列位于第一第一列而不是标题中。

您不能安全地切换到表格布局:“自动”,因为表格随其内容而无限增长

当tableRowColumn的宽度随内容而变化时,如何调整表头的宽度呢?
我似乎无法设置它,使这两个对齐。

我猜您要么使用fixedHeader={true}不能设置自定义宽度,要么不这样做,必须将标头保留在<TableBody>

好的,将标头放入tbody即可! 现在,我需要弄清楚如何执行多行标题列。 有小费吗?

您是否正在尝试实现这样的目标? (如果没有,您可能会在此网站上找到正确的示例)

我认为你可以做你想做的几乎所有与属性colSpanTableHeaderColumnTableRowColumn并行跨度TableRow

我不明白-为什么关闭?

将TableHeader放入TableBody对我不起作用。

@ tvtri96
我们建议将tableRow用作tableBody中的tableheader,
但在我看来,它现在工作正常。

现在在我的代码中是这样的:

<Table fixedHeader={true}>
          <TableHeader>
            <TableHeaderComponent schema={schema}/>
          </TableHeader>
          <TableBody displayRowCheckbox={false} showRowHover={true}>
            {this.props.data.map((item, index) => (
              <TableRowComponent key={index} schema={this.props.schema}
                item={item} onRemoveClick={this.handleRemoveItem}
                onEditClick={this.handleEditItem}
              />
            ))}
          </TableBody>
</Table>

和标题列与正文列正确对齐。

谢谢你的回答。 TableHeaderComponent内部是什么? 我想这不像普通的TableHeader吧?
```

时间戳记

是的,它只是出于某种原因而包装。

有什么消息吗? 如何让列自动调整为内容?

这对我有用,自动调整大小:

      <Table style={{tableLayout: 'auto'}}>

@arjan

 <Table style={{tableLayout: 'auto'}}>

这对标题没有影响。

<Table fixedHeader={false} style={{ tableLayout: 'auto' }}>有效(根据内容动态调整大小)。

我需要添加width: "auto" ,结果是:

<Table fixedHeader={false} style={{ width: "auto", tableLayout: "auto" }}>

@nathanmarks ,请重新打开。

Table应该具有内置属性以允许其自动调整内容大小,并且不需要禁用fixedHeader 。 我会更进一步地说,自动调整内容大小应该是默认行为。

@devuxer对不起,但是我们没有主动向v0.x分支添加功能。

@mbrookes ,感谢您

@devuxer我相信,它是从头开始重写的。

https://material-ui-next.com/demos/tables/

我有一个包含三列的表,其中第一列和第三列将始终包含少量文本。 我希望第二列占用大部分空间,因此第一列和第三列将分别推到表格的左边缘和右边缘。 这对我有用( className方便起见,在这里使用style而不是className ):

<Table style={{ tableLayout: "auto" }} />
<TableRowColumn style={{ width: "10%" }}>{text}</TableRowColumn>
<TableRowColumn style={{ width: "80%" }}>{text}</TableRowColumn>
<TableRowColumn style={{ width: "10%" }}>{text</TableRowColumn>

我找到了一个更好的解决方案...因此,每一列都具有相同的宽度。
假设我有三个专栏,我希望第一个专栏占据整个宽度的一半,而第三个专栏应该占该行的三分之一; 中间的一个是最小的一个:

  <TableRowColumn colSpan='3'>twice as big!</TableRowColumn>
  <TableRowColumn> I'm small</TableRowColumn>
  <TableRowColumn colSpan='2'>I'm in between</TableRowColumn>

实际上,我有7列,但是colspans的总和等于20-最后一个仅包含一个要删除的图标,其余大多数是colspan 3-大文本字段是colspan 6,而selectfield和datepicker是在colspan 2上...

奇迹般有效!

v1.4.3中很好用

const styles = { 
    narrowCell: {
        'width': '150px',
    }
};

<Table>
    <TableHead>
        <TableRow>
            <TableCell>Company Name</TableCell>
            <TableCell className={classes.narrowCell} numeric>Amount</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
    <TableRow>
        <TableCell> name 1 </TableCell>
        <TableCell className={classes.narrowCell}> $100 </TableCell>
    </TableRow>
    </TableBody>
</Table>


也可以给出百分比宽度,其余单元格平均分布

如果必须在TableHead行中使用colspan={2} ,如何使用此解决方案?

如果我添加colspan={2}所有列将具有相同的宽度。 像这样:

const styles = { 
    narrowCell: {
        'width': '150px',
    },
    miniCell: {
        'width': '75px',
    },
};

<Table>
    <TableHead>
        <TableRow>
            <TableCell>Company Name</TableCell>
            <TableCell className={classes.narrowCell} numeric colspan={2}>Amounts</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
    <TableRow>
        <TableCell> name 1 </TableCell>
        <TableCell className={classes.miniCell}> $100 </TableCell>
        <TableCell className={classes.miniCell}> $100 </TableCell>
    </TableRow>
    </TableBody>
</Table>

@Bowfish如果要更改colspan = {2}单元格宽度,请尝试更改表格宽度,因为它可以覆盖整个表格。 较小的电池可单独调节。

应用这种样式对我有帮助:
对于行中的不同cel,我只是使用了不同的maxWidth ,但使用内联样式的每一列都相同。

const styles = (theme) => ({
  tableCell: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    maxWidth: '40px',
  },
});

以上发布的解决方案均无效。 为什么这么难实现?

  <Table fixedHeader={false} style={{tableLayout: "auto" }}>
        <colgroup>
            <col width="250px" />
            <col />
            <col width="40px" />
            <col width="40px" />
        </colgroup>
        <TableHead>
          <TableRow>

第二列是flex

不知道是否有人对此仍然有疑问,但是我最终使用了withStyles,它在这里是伪代码:

import {withStyles} from '@material-ui/core/styles';  

const styles = theme => ({
    cell: {
        width:'20%'
    },
    cellLarge: {
        width:'60%'
    } 
});

<Table >
       <TableHead>
               <TableRow>
                        <TableCell className={this.props.classes.cell}>header 1</TableCell>
                         <TableCell className={this.props.classes.cell}>header 2</TableCell>
                         <TableCell className={this.props.classes.cellLarge}>header 3</TableCell>
                </TableRow>
          </TableHead>
                <TableBody>
                        <TableRow>
                            <TableCell>value 1</TableCell>
                            <TableCell>value 2</TableCell>
                            <TableCell>value 3</TableCell>
                        </TableRow>
               </TableBody>
   </Table>

export default withStyles(styles)({ComponentName})

以上发布的解决方案均无效。 为什么这么难实现?

我以某种方式认识到它为什么不起作用的原因,因为我们只为TableHeadTableBody设置了width TableBody ! 为了使其工作,我们应该在TableHeadTableBody TableCell上定义minWidthmaxWidth bot,这里是示例

<Table>
    <TableHead>
        <TableRow>
            <TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
            <TableCell column='data2' style={{minWidth:'200px', maxWidth:'200px'}}>{content}</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
            <TableRow>
            <TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
            <TableCell column='data2' style={{minWidth:200, maxWidth:200}}>{content}</TableCell>
            </TableRow>
    </TableBody>
</Table>

如您所见,我们可以同时使用整数和字符串的样式值。 但是对于字符串,当您通过px定义它时才有效,如果您使用百分比,如minWidth:'25%' ,那么它将不起作用,我已经尝试过了。

为什么我同时使用minWidthmaxWidth ? 不是width吗? 因为我已经尝试过,所以如果要使列的宽度固定,则必须使用minWidthmaxWidth而不是width 。 我不知道为什么,但是width似乎无法解决此问题。

注:_Both TableCellTableHeadTableBody包含相同的数据,必须有相同的风格_!

希望这段代码对大家有帮助

我将每个表单元的宽度:10%,最小宽度:10%和最大宽度:10%设置为包括表标题下的宽度。 然后,我继续创建<colgroup>..etc元素,并对它们应用相同的样式。 我还将Table元素设置为tableLayout:auto和width:auto。 我尝试了该线程中的每个解决方案,并将所有解决方案组合到了这个最终输出中。 此外,我还使用了chrome中的“检查元素”工具,并修改了表格中的每个元素以使用宽度:10%最小宽度:10%和最大宽度:10%。 这也反映在devtools中的React检查器中。 从字面上看,我发现所有元素ive都更改为“宽度10%”等。

结果:仍然不调整列的宽度

我认为现在可以假设实际上存在一个不可能的事是安全的。 正是在这个线程中

编辑:

实际上,我最终做了一些与该线程中的人所建议的相反的事情……我在表中设置了autoLayout:fixed,它开始起作用。 这个黑魔法到底是什么

尝试设置宽度也很麻烦。 必须将选择复选框的宽度设置为:0.01%,以使其保持合理的宽度,其他方法无效

对于那些坚持旧版本并在页脚中苦苦挣扎的人,向@devenovil的解决方案中添加fixedFooter = {false}对我有用

@nathanmarks您能否至少阐明为什么要关闭此功能?
这应该是非常经常性的必需功能。

@pbassut是正确的。 这是表组件的非常基本的功能...是否有任何更新?
或解释为什么实施如此麻烦...

@devenovil如果不想使用% ,可以使用width代替maxWidth ,例如:

<TableCell style={{ width: '35%' }}>
  Table Data
</TableCell>
<TableCell>
  Another Table Data
</TableCell>

对我来说,它只为标头中的单元格设置了宽度: <TableCell width={props.colWidths[index] + '%'}> ,这导致整个表的列均按预期方式运行。

我用百分比设置了列宽,并且可以工作,但是由于某种原因,它在最右边添加了一个幻像列。 通过检查元素,它似乎向表中添加了“ TableStubCell”元素。 我不知道那是哪里来的。

我在其他MUI表中也遇到过类似的问题,而我的解决方法从来都不是那么好。 如果你们都打开并修复此问题,那将很酷……显然其他人也在努力解决此问题。

编辑:TableStubCell来自dx-react-grid-material-ui npm包,非常抱歉!

我的解决办法是

<Table>
  <TableHeader>
    <TableRow>
      <TableCell>
        <Box width="200px">
          User Fullname
        </Box>
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

但是如果我们能做的话会很好

<Table>
  <TableHeader>
    <TableRow>
      <TableCell width="200px">
        User Fullname
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

这对我来说适用于"@material-ui/core": "4.9.0"

<TableContainer className={classes.container}>
          <Table className={classes.table} stickyHeader size="small">
            <TableHead>
              <TableRow>
                <TableCell width="30%">User Name</TableCell>
                <TableCell width="20%">Designation</TableCell>
                <TableCell width="10%">Nid</TableCell>
                <TableCell width="20%">Email</TableCell>
                <TableCell width="10%">Mobile</TableCell>
                <TableCell width="10%">Gender</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {props.isGridLoading && (
                <TableRow>
                  <TableCell colSpan={6}>
                    <LoadingGridSpinner open={props.isGridLoading} />
                  </TableCell>
                </TableRow>
              )}

              {props.profileObj.lists &&
                props.profileObj.lists.map(row => (
                  <TableRow key={row.userProfileId} hover={true}>
                    <TableCell width="30%">
                      {row.userName}
                    </TableCell>
                    <TableCell width="20%">{row.designation}</TableCell>
                    <TableCell width="10%">{row.nid}</TableCell>
                    <TableCell width="20%">{row.email}</TableCell>
                    <TableCell width="10%">{row.mobile}</TableCell>
                    <TableCell width="10%">{row.gender}</TableCell>
                  </TableRow>
                ))}
            </TableBody>
          </Table>

@nazrulcsebd@crizant使用的方法对我

<TableContainer component={Paper} style={{ marginTop: 10 }}>
          <Table style={{ width: 'auto', tableLayout: 'auto' }}>
          <TableHead>
            <TableRow>
              <TableCell>Team Member</TableCell>
              <TableCell align="left">Level</TableCell>
              <TableCell align="left">Last Login</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            { tableArray.map(({ id, name, accessLevel, login }) => (
              <TableRow key={id}>
                <TableCell component="th" scope="row" style={{ width: '35%' }}>
                  {name}
                </TableCell>
                <TableCell align="left">{accessLevel}</TableCell>
                <TableCell align="left">{login}</TableCell>
              </TableRow>
            ))
          }
          </TableBody>
        </Table>
      </TableContainer>

在我的情况下,我希望表的末尾具有最小的栏,以保持一个“动作”按钮。 在TableHead中的TableCell中添加style={{ width: 1 }}可以达到目的。

        <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
                <TableHead>
                    <TableRow>
                        {header.map((th, i) => (
                            <TableCell key={i}>{th}</TableCell>
                        ))}
                        <TableCell style={{ width: 1 }}>actions</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map((row, i) => (
                        <TableRow key={i} hover>
                            {header.map((h, i) => (
                                <TableCell key={i} align="left">{row[h]}</TableCell>
                            ))}
                            <TableCell>
                                <IconButton aria-label="edit">
                                    <MoreHorizIcon fontSize="small" />
                                </IconButton>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
const useStyles = makeStyles(theme => ({
  table: {
    "& tr:nth-child(2), & td:nth-child(2) {
      width: '32px',
    }
  }
}));

然后,使用表格根目录中的样式

 <Table
     ....
     className={classes.table}
>

还没有测试太多(固定标头等)

例如,如果我们可以将相同的12列系统赋给表,那就更好了:

   <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row" xs={4}>
                {row.name}
              </TableCell>
              <TableCell align="right" xs={2}>{row.calories}</TableCell>
              <TableCell align="right" xs={2}>{row.fat}</TableCell>
              <TableCell align="right" xs={2}>{row.carbs}</TableCell>
              <TableCell align="right" xs={2}>{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>

如果列太多,有人知道让表在x方向上滚动的方法吗? 我只能通过给minWidth = something硬编码(对于未知的列数不是很好)来实现此目的

好像fixedHeader={false} style={{width: "auto", tableLayout: "auto"}}在最新版本中被忽略了。

有任何想法吗?

最后,我在表中使用了一个list元素,并定义了列表项的宽度,这是一种解决方法。
就像是:

<TableCell>
  <ul style={{ width: "150px" }}>
    <li>{row.whatever}</li>
    <li>{row.whatever1}</li>
    <li>{row.whatever2}</li>
  </ul>
</TableCell>

2020年仍然很难实现,最奇怪的部分是我尝试设置一列的宽度,即使我也为它们定义了宽度,其他列也会自动调整! 是什么赋予了? 就像桌子要确保整个桌子的宽度不超过100%一样,这给了我很大的麻烦。 如果我不使用material-ui的表,这将非常非常容易,看来material UI只会使它变得很难?

@aprilmintacpineda您是否尝试过使用本机<table>元素?

@oliviertassinari我没有将现有代码转换为本地<table>元素。

本示例通过设置所有列的宽度来工作
https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

ryanflorence picture ryanflorence  ·  3评论

chris-hinds picture chris-hinds  ·  3评论

zabojad picture zabojad  ·  3评论

mattmiddlesworth picture mattmiddlesworth  ·  3评论

activatedgeek picture activatedgeek  ·  3评论