react material UI開發環境，table 的中每列限制長度

一. 問題描述

react material UI開發環境，table 的中的其中一列資料，有資料過長，導緻真個表 變形，如下圖：

二. 解決方案

配置table cell的 屬性：

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

最關鍵的是：

textOverflow: 'ellipsis',

maxWidth: '40px',

textOverflow 的配置參數ellipsis 表示長度被截斷的地方，以省略号表示

maxWidth的值是指 固定寬度，不會因為内容過長而導緻table變形