边框底部样式没有效果

我有这个片段的HTML显示网格结构。它看起来大部分都是我想要的，但我希望最后三行有一个虚线下划线。我尝试使用以下的造型为具有底部边界：边框底部样式没有效果

风格=“边界底部：点缀;下边框色：黑色;边界底部宽度：2px的”>

但是它没有甚至当我调整宽度等时，所有的效果，我错过了什么？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <div id="AnimalGrid" style="border:solid; border-width:2px; border-color:lightgray; padding-left:12px;padding-top:8px;margin:10px"> 
    <table style="width:100%"> 
     <tr> 
     <td style="font-family:Calibri; font-size:large; color:midnightblue; text-align:left"><b>RESULT DETAILS</b></td> 
     </tr> 
     <tr> 
     <td style="width:25%; font-size:large; padding-left: 2px"><i>Animal<sup>1</sup></i></td> 
     <td style="width:25%; font-size:large; padding-left: 6px"><i>Animal</i></td> 
     <td style="width:25%; font-size:large; padding-left: 6px"><i>Speed<sup>2</sup></i></td> 
     <td style="width:25%; font-size:large; padding-left: 6px"><i>Type<sup>3</sup></i></td> 
     </tr> 
     <tr style="border-bottom-style:dotted; border-bottom-color: black; border-bottom-width:2px"> 
     <td style="width:25%; font-size:large; padding-left: 6px">Cheetah</td> 
     <td style="width:25%; font-size:large; padding-left: 6px">Tiger</td> 
     <td style="width:25%; font-size:large; padding-left: 6px">60mph</td> 
     <td style="width:25%; font-size:large; padding-left: 6px">Carnivore</td> 
    </tr> 

    <tr style="border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px"> 
     <td style="width:25%; font-size:large; padding-left: 6px">Lion</td> 
     <td style="width:25%; font-size:large; padding-left: 6px">Zebra</td> 
     <td style="width:25%; font-size:large; padding-left: 6px">40mph</td> 
     <td style="width:25%; font-size:large; padding-left: 6px">Mixed</td> 
    </tr> 

    <tr style="border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px"> 
     <td style="width:25%; font-size:large; padding-left: 6px">Horse</td> 
     <td style="width:25%; font-size:large; padding-left: 6px">Cow</td> 
     <td style="width:25%; font-size:large; padding-left: 6px">10mph</td> 
     <td style="width:25%; font-size:large; padding-left: 6px">Herbivore</td> 
    </tr> 
    </table> 
    </div> 
    </body> 
    </html>

来源

2016-08-28 user3079275

的[添加边框底部表行（http://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr） –

是这样的？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <div id="AnimalGrid" style="border:solid; border-width:2px; border-color:lightgray; padding-left:12px;padding-top:8px;margin:10px"> 
    <table style="width:100%"> 
     <tr> 
     <td style="font-family:Calibri; font-size:large; color:midnightblue; text-align:left"><b>RESULT DETAILS</b></td> 
     </tr> 
     <thead> 
     <th style="width:25%; font-size:large; padding-left: 2px"><i>Animal<sup>1</sup></i></th> 
     <th style="width:25%; font-size:large; padding-left: 6px"><i>Animal</i></th> 
     <th style="width:25%; font-size:large; padding-left: 6px"><i>Speed<sup>2</sup></i></th> 
     <th style="width:25%; font-size:large; padding-left: 6px"><i>Type<sup>3</sup></i></th> 
     </thead> 
     <tr> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Cheetah</td> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Tiger</td> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">60mph</td> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Carnivore</td> 
    </tr> 

    <tr> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Lion</td> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Zebra</td> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">40mph</td> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Mixed</td> 
    </tr> 

    <tr> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Horse</td> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Cow</td> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">10mph</td> 
     <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Herbivore</td> 
    </tr> 
    </table> 
    </div> 
    </body> 
</html>

来源

2016-08-28 03:56:01 jwpfox

这是它可能的复制，谢谢。 – user3079275

边框底部样式没有效果

回答

相关问题