'How to override Styling in Ant design?

So I have a table that is from ant design. it is adding padding or margin to the table so I cant get the table to expand from the left side because it is blocked by the ant design css, the table has a inline css of table layout :auto And I cant get rid of it. I have tried css meyers reset and tried margin:0 !important on various elements but that damn padding wont go away. Here is some code to look at. Thanks.

    background-size: cover; 
    background-repeat: no-repeat;
    height:180vh;
    margin-top:4%;

}

.wine-heading{
    font-size:4rem;
    text-align:center;
    font-family:Italianno;
    color:#f0ead6;
    

}

.ant-table-cell{
    font-size:1.5rem;
    font-family:Italiano;
    text-align:center;
    color:white;
    text-align: center;
    margin-left:auto;
    margin-right: auto;
    
}

.ant-table-thead .ant-table-cell {
    color:beige;
    text-shadow:0px 1px 1px black;
    display:flex column;
    justify-content:space-between;


}

table{
    margin:0 !important;
    display:flex column;
    justify-content:space-around !important;
}


.ant-table-content table{
    margin:0 !important;
}




.ant-table-container{
    margin:0;
    width:100%;
}

.ant-table-tbody{
    display:flex column;
    justify-content:space-around;
    
}

.ant-table-tbody{
    padding: 0 !important;
  }
  .ant-table-tbody  > tr > td{
    padding: 0 !important;
  }

.ant-table{
    margin:0 !important;
}

winelist.js
return (
    <>
      <section
        className="wine-section"
        style={{
          backgroundImage: `url(${wine})`,
        }}
      >
        <animated.div style={props}>
          <h4 className="wine-heading">Carmellos Wine List</h4>

          <Table dataSource={dataSource} columns={columns} pagination={false} />
        </animated.div>
      </section>
    </>
  );
cssreactjsant-design-pro


Solution 1:[1]

u mean override css in antd table? maybe i meet the same problem few days ago. u can import a winelist.css : find the htmldom at chrome . and then u can get the css selector ,then u can override the css by your ownenter image description here

[![enter image description here] enter image description here

at here u can try to override the style,the padding is at a in the

Solution 2:[2]

from developer tool find the exact table div with class which have padding or margin.

override the same class in the your project global css file and add padding,margin 0 with !important and I hope it will work.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Siddharth Bagal

Related Questions