CSS样式不在浏览器中显示

Question

我正在为网站设计自定义表格。在Dreamweaver中，Design标签显示了我想要的内容，但在Live标签中没有边框和内容可见。我试图找到解决方案，我可能忽略了一些东西，但我还没找到解决方案。我在这里发布代码：

CSS

#tableData{
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    color:#09F; 

    padding-bottom:25px;
    padding-top:10px;

    border-bottom:thin;
    border-bottom-color:#09F;


}        


table{
    width:600px;
    border: 1px solid #666;
}


li{
    list-style:none;
    height:22px;
    border-bottom:1px;
    border-bottom-color:#09F;
}


#tableHeading{
    font-family:Arial;
    font-size:32px;
    color:#666; 
    padding:10px;
    float:left;
    padding-right:500px;
    border-left:thick;
    border-right:thick;
    border-left-color:#09F;
    border-right-color:#09F;

}  

HTML

   <tr>
    <td id="tableData">
         <ul>
             <li>Android</li>
             <li>abced </li>
             <li>xyz</li>
         </ul>
   </td>
  </tr>

在设计视图中：

在实时视图（浏览器）中：

我做错了什么？我该如何解决？

此致

Answer 1

替换

border-left:thick;
border-right:thick;
border-left-color:#09F;
border-right-color:#09F;

通过

border-left:thick solid #09F;
border-right:thick solid #09F;

Answer 2

更改CSS： -

#tableData{
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    color:#09F; 

    padding-bottom:25px;
    padding-top:10px;

    border-bottom-style:solid;/*Updated*/
    border-bottom-color:#09F;/*Updated*/

}

#tableHeading{
    font-family:Arial;
    font-size:32px;
    color:#666; 
    padding:10px;
    /*float:left;*/
    padding-right:500px;
    border-left: 5px solid #09F;
    border-right: 5px solid #09F;
}  

您需要提及完整的“ border-bottom-style ”和“ border-bottom-color ”

或使用此代替“border-bottom:1px solid #09F;”

请参阅此小提琴：http://jsfiddle.net/aasthatuteja/gDkn6/

希望这应该有所帮助！

Answer 3

您在Dreamweaver设计视图中看到的虚线边框会生成，以显示其中有一个元素，这确实不是您网页的一部分。

CSS中的边框由3个主要组件组成：宽度，颜色和样式。 样式属性是您错过的。

将边框样式更改为：

border-bottom-width: thin;
border-bottom-color: #09F;
border-bottom-style: solid;

您也可以使用边框底部的简写：

border-bottom: solid thin #09F;

此外，我建议您使用宽度的数值，例如：1px，这样您就可以准确了解所得到的内容。