CODEWITHSUNDEEP
reactjsantd
user2921009
user2921009

Reputation: 833

Ant Design: remove the divider line between table rows

When making a Table in Ant Design, there are always gray divider lines between each row. Is there a way to style these divider lines or completely remove them from the table?

Upvotes: 4

Views: 9555

Answers (4)

Shamseer Ahammed
Shamseer Ahammed

Reputation: 1947

You need to provide headerSplitColor: 'transparent', for Table in your ConfigProvider which is the recommened approch to customising theme in Antd,

lean more here : https://ant.design/docs/react/customize-theme

<ConfigProvider
  theme={{
    components: {
      Table: {
        headerSplitColor: 'transparent'
      }
    }
  }}
>
  // your code
</ConfigProvider>

Upvotes: 2

Deniz
Deniz

Reputation: 1

Maybe it will help someone: I had a task to remove the line (border bottom) in the last row of the table. The solution is:

.ant-table-tbody > tr:last-child > td {
    border: none
}

style for all Table.

Upvotes: 0

Artyom Vancyan
Artyom Vancyan

Reputation: 5380

You should override the antd table styles

.ant-table-tbody > tr > td {
  border: none
}

Upvotes: 5

Saeed Shamloo
Saeed Shamloo

Reputation: 6554

if you are using css-modules in your Nextjs application, you can override table styles like this:

in them component file:

import classes from './Comp.module.css';
function Comp(props){
  ...
  return (
    <Table
       ...
       className={classes.customTable}
   />
  )
}

and in the Comp.module.css file:

.customTable .ant-table-tbody > tr > td{
    border: none
}

Upvotes: 0

Related Questions