我正在尝试使用表格制作棋盘,因此想要消除 td
元素之间的任何填充:
但是,它们得到了 8px
的填充,并且开发人员工具说它是从我的类 noPadding
继承的:
这没有任何意义...我该如何解决这个问题?
CSS
的其余部分,以防相关:
.noPadding {
padding: 0px;
}
html {
height: 100vh;
width: 100%;
margin: 0px;
}
body {
height: 100%;
height: 100%;
margin: 0px;
}
.container-fluid {
background-image: url(baggrunn.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
.thinBorder td,
.thinBorder th,
.thinBorder tr {
border: solid #000 1px;
padding: 0;
margin: 0;
}
.borderless td,
.borderless th,
.borderless tr {
border: none;
padding: 0;
margin: 0;
}
.noBordersBruh table td,
.noBordersBruh th {
display: block;
border-collapse: collapse;
border-spacing: 0;
box-sizing: border-box;
}
.top20 {
padding-top: 15px;
width: 100%;
font-size: 20px;
font-weight: bold;
}
.glyphicon {
font-size: 20px;
}
.noPadding {
padding: 0px;
}
.noMargin {
margin: 0px;
}
.herregudbredde {
width: 12.5%;
}
.fullBredde {
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table borderless noBordersBruh col-md-12" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="A8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="B8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="C8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="D8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="E8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="F8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="G8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="H8"></td>
</tr>
</tbody>
</table>
最佳答案
确保 .noPadding
类覆盖为表元素定义的 Bootstrap 的“.table”类填充。
我无法测试您的代码,但其中一些 CSS 规则应该有效:
简单:
.noPadding {
padding: 0 !important;
}
或者,避免 !important
指令:
.noPadding,
.table>thead>tr>th.noPadding,
.table>tbody>tr>td.noPadding,
{
padding: 0;
}
您可能需要添加更多选择器来覆盖 .table
类,如您的 Imgur 屏幕截图所示。
关于html - 幽灵填充出现在 td 中,即使我删除了填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54281186/