分隔4个边框(边框底部),并使用填充CSS在列(th)之间留出空间

时间:2018-06-28 02:51:30

标签: css wordpress

我使用了填充,边框间距和其他代码,但是它不适用,甚至没有应用边距,如何解决?

工作台边距图像:

image of the table margin

我希望我的输出像这样:

enter image description here

  

这是我的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;
}

1 个答案:

答案 0 :(得分:0)

这是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>