表格HTML的不同样式

debugcn 发表于 Dev

梅林德克

我有一个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;，但是我的自定义表如何复制所有样式规则，而不是边框？

雅库布·米哈莱克（JakubMichálek）

实际上，这不是边界，而是边界box-shadow。

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

这可以解决问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。