I'm currently working with a table from Ant Design, but I'm facing an issue where the padding or margin applied by the Ant Design CSS is preventing the table from expanding on the left side. The table has an inline CSS of table layout: auto which I cannot seem to remove. I've tried using CSS Meyer's reset and adding margin: 0 !important to various elements, but the padding just won't go away. Below is some code for reference. Any help would be appreciated. Thank you.
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>
</>
);