table组件的列columns添加minWidth属性，表示最小长度

[ctq123]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

1）目前设置width属性，最终会按比例设置宽度，若屏幕宽度很小时，并且不设置scroll.x情况下，table格式就会变形；
2）其次，当每个列都设置了width，若屏幕宽度W > totalWidth(列宽度总和)，即使设置了scroll.x属性，table样式也会出现变形；
3）scroll.x width 的处理方式，通常情况下scroll.x 要大于等于 totalWidth，使用过程中还要计算，调整宽度就特别不方便；
因此，特别希望增加一个minWidth属性，颗粒度由行变为列，主要是为了更好用，易用。

What does the proposed API look like?

Table列columns添加minWidth属性

[zombieJ]

Duplicate of #8981

[afc163]

It is hard to implement it by adding css.

[harry91]

It will be really useful.

[TIS-OMiddle]

分享个目前的简单实现，1. 最后增加一列什么都没有的列，用来填充可能存在的剩余空间。 2. 倒数第二列隐藏掉右边框，让它和最后一列看起来是连在一起的。

const columns = [
  {title: 'xx', dataIndex: 'xx', width: 100},
  {title: 'xxx', dataIndex: 'xxx', width: 150},
  {title: 'xx3', dataIndex: 'xx3', width: 30, className: 'hide-right-border'}, // write a css 'hide-right-border' to hide the border
  {}, // empty column, used to adjust the table
]

[liamyoon]

use empty column and colSpan

  const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      width: 300, // min-width
      render: (text) => {
        return {
          children: (
            text // or JSX Element
          ),
          props: {
            colSpan: 2,
          },
        };
      },
    },
    {
      render: (obj) => {
        return {
          children: obj,
          props: {
            colSpan: 0,
          },
        };
      },
    }, // empty column
    {
      title: 'a column',
      dataIndex: 'modifiedDate',
      width: 120,
    },
    {
      title: 'b column',
      dataIndex: 'modifiedDate',
      width: 120,
    },
    {
      title: 'c column',
      dataIndex: 'modifiedDate',
      width: 400,
    },
    {
      title: 'd column',
      dataIndex: 'modifiedDate',
      width: 300,
    },
  ]

[noih]

use css max

  <Table.Column
    title="title"
    key="name"
    dataIndex="name"
    width="max(300px, calc(100vw - 60px))"
    ellipsis
    render={(name) => <div>{ name }</div>}
  />

[shuqianchi]

So is the problem being solved? it really useful

[antonabramovich]

@liamyoon Thanks for the direction, I've tried that solution, but unfortunately that doesn't work well with fixed header (try resizing to a less than sum of all columns widths) https://codesandbox.io/s/colspan-and-rowspan-antd4161-forked-t0ete?file=/index.js
Only seems to be borken in Chrome prior to version 91, though.

[theDoinb]

实际项目里，特别多这种需求感觉，因为客户机器分辨率都不太一样，导致表格定宽非常麻烦，因为肯定是不希望表头换行的，但是你设置个宽度，确实不换行，但是在其他分辨率下这个列，内容不多但是占的空间很大导致留白很多，其他自动缩进的列，又可能换行了，所以说有minHeight对于表格在不同分辨率下的表现肯定是更好的

[gclb]

由于ant3.x 使用了rc-table@6.x

设置clounms每个colgroup下的col中style样式变更格式如下：

columns: [{ title: '最小宽度设置', dataIndex: 'minWidth', key: 'minWidth', 'RC_TABLE_INTERNAL_COL_DEFINE': { style: { minWidth: '165px' } } }]

[btnkr]

It will be really useful. +1

[qwerlp]

Duplicate of #8981

#8981的副本

咋这个属性还没加上呢，真的很有用

[qwerlp]

2022年了，还是没有

[oskarkk]

Thanks @liamyoon, that's the only solution that worked for me. No problems with headers or anything in Chrome or Firefox.

[fantasy1943]

@gclb 你的这个，对表格内容是有效的，但是表格标题头不生效，有办法解决吗？