可以设置表格列的宽度吗?
+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:。
一些反馈将不胜感激。
我一直在设置列的宽度是为了
您不能安全地切换到表格布局:“自动”,因为表格随其内容而无限增长
当tableRowColumn的宽度随内容而变化时,如何调整表头的宽度呢?
我似乎无法设置它,使这两个对齐。
我猜您要么使用fixedHeader={true}
不能设置自定义宽度,要么不这样做,必须将标头保留在<TableBody>
。
好的,将标头放入tbody即可! 现在,我需要弄清楚如何执行多行标题列。 有小费吗?
您是否正在尝试实现这样的目标? (如果没有,您可能会在此网站上找到正确的示例)
我认为你可以做你想做的几乎所有与属性colSpan
于TableHeaderColumn
和TableRowColumn
并行跨度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我相信,它是从头开始重写的。
我有一个包含三列的表,其中第一列和第三列将始终包含少量文本。 我希望第二列占用大部分空间,因此第一列和第三列将分别推到表格的左边缘和右边缘。 这对我有用( 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})
以上发布的解决方案均无效。 为什么这么难实现?
我以某种方式认识到它为什么不起作用的原因,因为我们只为TableHead
或TableBody
设置了width
TableBody
! 为了使其工作,我们应该在TableHead
和TableBody
TableCell
上定义minWidth
和maxWidth
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%'
,那么它将不起作用,我已经尝试过了。
为什么我同时使用minWidth
和maxWidth
? 不是width
吗? 因为我已经尝试过,所以如果要使列的宽度固定,则必须使用minWidth
和maxWidth
而不是width
。 我不知道为什么,但是width
似乎无法解决此问题。
注:_Both TableCell
的TableHead
和TableBody
包含相同的数据,必须有相同的风格_!
希望这段代码对大家有帮助
我将每个表单元的宽度: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 (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (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
最有用的评论
在我的原始HTML表中,列宽是根据内容自动设置的。 material-ui似乎在所有列上强制使用相等的宽度。 有没有一种方法可以将列宽设置为动态,例如原始HTML表?