How does the Table component correctly correspond to headers and cells without wrapping the long text of the cell?

as shown in the figure, because the display area is limited, the length and height of the table are limited, so width and height, are set up, and then all the text must be displayed and cannot be wrapped. The problem now is that the title is misaligned with the actual data, and I don"t know how to do it

.

official example of antd directly modified by the test code. Paste the following code to see the effect. The test address is https://codesandbox.io/s/xpqy..

action</a>
  }
];

const data = [];
for (let i = 0; i < 100; iPP) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `LondonPark noLondon asdPa. ${i}`,
    address1: `LondonPark noLondon asdPark noLondon asdPark noLondon asdPark no. ${i}`,
    address2: `LondonPark noLon asdPark noLondon asdPark no. ${i}`,
  });
}

ReactDOM.render(
  <Table
    columns={columns}
    dataSource={data}
    size="small"
    scroll={{ x: 1500, y: 300 }}
    style={{ width: "100%", whiteSpace: "nowrap"  }}
  />,
  document.getElementById("container")
);
Oct.09,2021

just remove text-align 300


this you can directly adjust the value of the text-align attribute

Menu