1

我有一个 Wordpress 模板,它具有表格的基本样式:

table {
    border-collapse:separate;
    border-spacing:0;
    margin-bottom:30px;
    margin-top:30px;
    width:100%;
}

table, td, th {
    vertical-align:middle;
    line-height: 30px;
    border: 2px solid #EDEBE5;
}

th {
    color:#585D63;
    font-family:Helvetica, sans-serif;
    font-size:20px;
    font-weight:normal;
    text-align:center;
    line-height: 50px;
    padding-left: 10px;
    background-color: #EDEBE5;
    font-style:italic;
    box-shadow: 0 0 1px #BBBBBB;
    -moz-box-shadow: 0 0 1px #BBBBBB;
    -webkit-box-shadow: 0 0 1px #BBBBBB;
}

td {
    color:#585D63;
    font-family:Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-align:center;
    line-height: 50px;
    padding-left: 10px;
    font-style:italic;
    background: none repeat scroll 0 0 #EDEBE5;
    box-shadow: 0 0 1px #bbbbbb;
    -moz-box-shadow: 0 0 1px #bbbbbb;
    -webkit-box-shadow: 0 0 1px #bbbbbb;
}

现在我的客户希望我为联系信息创建一个基本表。但是每当我创建一个表格时,它会自动使用下面列出的带有背景和边框的样式。

现在我给我的桌子上了一个不同的课,比如

<table class="contacttbl">

 <tr>
   <td class="contacttd">Telefoon:</td>
   <td class="contacttd">+31 (0) 000000000000</td>
 </tr>
 <tr>
   <td class="contacttd">Telefoon:</td>
   <td class="contacttd">000000000000</td>
 </tr>
 <tr>
   <td class="contacttd">Telefoon:</td>
   <td class="contacttd">+31 (0) 000000000000</td>
 </tr>

</table>

和风格:

.contacttbl{
   width:300px;
   border:0px;
}

.contacttd{
   text-align:left;
   border:0px;
   background-color:#FFFFFF;
}

除了一件事之外,这一切都很好。我做的时候仍然得到边框border:0px;我的自定义表格怎么会复制所有样式规则,而不是边框​​?..

4

3 回答 3

1

它实际上不是一个边界,而是一个box-shadow.

.contacttd{
    text-align:left;
    border:0px;
    background-color:#FFFFFF;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

这可以解决问题。

于 2013-09-10T14:37:34.780 回答
0

在原来的 CSS 上tdth有一个边框,但您还没有将这些添加到名为 contacttbl 的新 CSS 类中。添加tdth边框为0px;

例如,整理tds:

.contacttbl td {
border:0px;
}
于 2013-09-10T14:35:36.563 回答
0

尝试添加border-collapse如下

.contacttbl{
    width:300px;
    border:0px;
    border-collapse: collapse;
}
于 2013-09-10T14:36:00.557 回答