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?

score 4 · Accepted Answer · answered Aug 13 '20 at 09:00

4

your-stylesheet.scss:

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

answered Aug 13 '20 at 09:00

Trien Tran

394
1
7

thank you, it work. Please, can you help me how set width for columnt. I try : `.ant-table col { width: 50px;}` But it not work. My table is currently outside the block boundary of the Card – Утка Обычная Aug 13 '20 at 10:28
You can see the answer here : https://github.com/ant-design/ant-design/issues/14291 – Trien Tran Aug 15 '20 at 06:48

score 0 · Answer 2 · answered Aug 12 '20 at 09:33

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

How to change the fontSize in an Antd table

2 Answers2