Как убрать пространство между фиксированными столбцами и оставшимися столбцами таблицы при добавлении полосы прокрутки по оси x в таблицу с помощью ant-design?

Question

Я использую ant-design для добавления полосы прокрутки по оси x к таблице. Для этого, когда задан атрибут fixed, он создает пространство между фиксированными столбцами и оставшейся таблицей таблицы. И я хочу, чтобы размер таблицы на 100%

Вот изображение таблицы, которая имеет пространство между фиксированным столбцом и оставшимися столбцами

Вот изображение таблицы после сворачивания окна

render() {
    const columns = [
      {
        title: "First Name",
        dataIndex: "first_name",
        key: "first_name",
        fixed: "left",
        width: '100'
      },
      {
        title: "Last Name",
        dataIndex: "last_name",
        key: "last_name",
         width: '100',
      },
      {
        title: "Employee Id",
        dataIndex: "employee_id",
        width: '100',
        key: "employee_id"
      },
      {
        title: "Contact",
        dataIndex: "contact_list",
        width: '100',
        key: "id",
        render: text =>
          text.map(item => (
            <div key={key++}>
              {item.contact_type_name}:{item.contact_value}
            </div>
          ))
      },
      {
        title: "Department",
        dataIndex: "employment_details_list",
        width: '100',
        key: "employment_details_list",
        render: (text, row) =>
          text.map(item => <div key={row.id}>{item.department_name}</div>)
      },
      {
        title: "Joindate",
        dataIndex: "employment_details_list",
        width: '100',
        key: "employement_start_date",
        render: (text, row) =>
          text.map(item => <div key={row.id}>{item.employment_start_date}</div>)
      },
      {
        title: "Designation",
        dataIndex: "employment_details_list",
        width: '100',
        key: "designation",
        render: (text, row) =>
          text.map(item => <div key={row.id}>{item.designation_name}</div>)
      },
      {
        title: "Action",
        dataIndex: "action",
        width: '100',
        // fixed: 'right',
        key: "action",
        render: (text, row) => (
          <span>
            <label onClick={this.handleEdit.bind(this, row)}>Edit</label>
            <Divider className="divider" type="vertical" />
            <Popconfirm
              title="Sure to delete?"
              onConfirm={this.handleRowDel.bind(
                this,
                row,
                this.state.employeeData
              )}
            >
              <label>Delete</label>{" "}
            </Popconfirm>
          </span>
        )
      }
    ];
    return (
      <div className="container">
        <div className="add-employee">
          <div span={2}>
            <Button type="primary" size={"large"} onClick={this.handleAddEvent}>
              <Icon type="plus" /> Add Employee
            </Button>
          </div>
        </div>
        <Row>
          <Col>
            <Table
              columns={columns}
              dataSource={this.state.employeeData}
              rowKey="id"
              className="employee-table"
              pagination={{ pageSize: 6 }}
              scroll={{ x: 900}}
              loading={this.state.employeeData.length === 0 ? true : false}
            />
          </Col>
        </Row>
      </div>
    );
  }

Answer 1

не использовать параметр ширины в конфигурации таблицы; использовать ширину CSS в параметре рендеринга в конфигурации столбца

как это

{
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    //width: 150
    render: (address)=> {
       return (
           <div className="ellipsis" style={{ maxWidth: "150px" }}>
              {address}
           </div>
       )
    }
}

Работает довольно хорошо. Спасибо позже.

Используйте его для многоточия, иначе ваш текст может переполниться или стать невидимым после заданной ширины.

мой собственный класс эллипсиса

.ellipsis {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

Все это в одном месте, посетите CodeSandbox здесь https://codesandbox.io/s/infallible-yonath-5kot6

Надеюсь, это поможет.