css - 使用填充 css 分隔 4 个边框(边框底部)并在列(th)之间留出空间
问题描述
我使用了填充和边框间距和其他代码,但它没有应用,甚至边距也没有应用,如何解决?
表格边距的图像:
我希望我的输出是这样的:
这是我的css代码请检查我是否输入了一些错误的css代码,以便我检查我的错误。
.dialog-ovelay .dialog table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
.dialog-ovelay .dialog th {
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 70px 15px 0px 15px;
width: 25%;
font-family: sans-serif;
color: #1E1C1C;
font-size: 14px;
}
.dialog-ovelay .dialog td.tdtitle {
text-align: left;
padding-left: 20px;
text-transform: uppercase;
font-size: 12px;
color: #c0c0c0;
padding-top: 15px;
}
.dialog-ovelay .dialog th.tdtitle {
padding-top: 15px;
}
.dialog-ovelay .dialog th.tdtitlefing {
padding-top: 20px;
}
.dialog-ovelay .dialog td {
text-align: left;
padding-left: 20px;
font-size: 15px;
color: #1E1C1C;
}
td.imgprev-front, td.imgprev-back {
padding-bottom: 160px;
}
解决方案
是border-collapse
属性。默认为separate
,因此您的 CSS 可能会将此值更改为border-collapse: collapse;
table {
border-collapse: separate;
border-spacing: 10px;
}
th {
border-bottom: 1px solid #ff0000;
}
<table class="tg">
<tr>
<th class="tg-yw4l">Home</th>
<th class="tg-yw4l">Space</th>
<th class="tg-yw4l">StackOverFlow</th>
<th class="tg-yw4l">Kepler</th>
<th class="tg-yw4l">Saturn</th>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>
推荐阅读
- avro - Avro 合约与枚举的兼容性
- c# - Zebra 打印机在 ASP.NET MVC 中打印二维码标签
- javascript - 来自谷歌表格的谷歌图表查询错误
- arduino - 如何通过以太网屏蔽与 Arduino 连接到 loaclhost?
- sql-server - SSRS 2 个小数位使用强制转换、格式等,但总和不正确
- android - Android ION 发布请求失败
- qt - Qt Quick QML 自定义组合框弹出
- javascript - 不确定如何在更改导航选项卡时停止计时器重置
- tensorflow - 为什么 Keras Lambda-Layer 会导致问题 Mask_RCNN?
- postgresql - 如何在 linq 中使用动态查询来实体?