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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ead899-47f38.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ead899-47f38.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?