MaterialUI表格-使用跨度的等宽列? [英] MaterialUI Table - Equal width Columns using Span?

问题描述

我正在尝试利用Material UI中的Table组件来构建数据表.但是，我正在努力为数据表创建等宽的列.目前，我正在尝试这样的事情:

I'm trying to utilize the Table component from Material UI to build a data table. However, I'm struggling with making equal width columns for my datatable. Currently I'm trying something like this:

<TableCell key={props.name} style={{width: '25%'}}>
          <span
            style={{
              width: `${(100 / props.numCols)}%`,
              whiteSpace: "pre",
              overflow: "scroll",
              display: 'block'
            }}
          >
            {props.value}
          </span>
 </TableCell>

但是，这似乎并不能解决问题.我希望有4列等宽，但是在这张照片中，您会看到只能看到3列(第4列在屏幕外)，并且值得注意的是，第3列非常长.任何指针，我将不胜感激！

However, this doesn't seem to do the trick. I expect 4 columns of equal widths but in this photo you'll see that you can only see 3 of the columns (the 4th one is way off-screen) and notably, the 3rd column is extremely long. I would appreciate any pointers!

似乎width属性实际上占用了文本长度的100％?有什么办法可以使它适应桌布的宽度吗?

It seems like the width property is actually taking 100% of the length of the text? Is there a way I can get it to take the width of the tablerow?

推荐答案

我知道这个问题有些过时了，但是您可以执行以下操作以获得对表行宽度分布的更多控制:

I know this question is a little bit dated, but you can do the following to get more control over your table row width distribution:

<Table style={{ tableLayout: 'fixed' }} > .. </Table>

这篇关于MaterialUI表格-使用跨度的等宽列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！