How to change the fontSize in an Antd table

Question

I tried to change the fontSize , but it did not take effect:

<Table
  style={{overflow: 'hidden', width: '100%', fontSize: '10px'}}
  dataSource={data.dataSource}
  columns={columns}
  size='small'
  bordered
  pagination={false}
/>

Also my table doesn't fit in the block. Only 3 columns are displayed and the rest disappear. How can this be resolved?

Answer 1

• your-stylesheet.scss:

  .ant-table table { font-size: 10px; }

Answer 2

Here is the original answer you can use sass or less .

    .booking_information_table {
        :global {
            .ant-table-thead > tr > th,
            .ant-table-tbody > tr > td {
                fontSize: '10px';
            }
    }

Secondly You can use the scroll property of Table and remove overflow: hidden