如何覆盖蚂蚁设计中的样式？
因此，我有一张来自Ant Design的桌子。它在桌子上增加了填充或边距，因此我无法让桌子从左侧展开，因为它被蚂蚁设计CSS阻挡，桌子上有一个css of table布局：自动，我无法摆脱它。我尝试重置CSS Meyers并尝试了边距：0！在各种元素上很重要，但是该死的填充不会消失。这是一些可以查看的代码。谢谢。
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>
</>
);
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>
</>
);
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你的意思是覆盖 antd 表中的 css 吗？
也许几天前我遇到了同样的问题。
你可以导入一个 winelist.css ：
在 chrome 中找到 htmldom 。然后你就可以得到CSS选择器，然后你可以用你自己的
[![在此处输入图像描述]
在这里你可以尝试覆盖样式，填充位于
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 own
[![enter image description here]
at here u can try to override the style,the padding is at a in the
从开发人员工具中找到具有填充或边距的类的确切表格。
在您的项目全局CSS文件中覆盖同一类，并添加填充，保证金为0！
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.