How to change the fontSize in an Antd table

user_13961512 0
Viewed 8883

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?

antd reactjs font-size size javascript
2 Answers

  • your-stylesheet.scss:

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

user_114188900

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

user_72134080
Related