边框底部样式无效答案

【问题标题】：border-bottom style having no effect边框底部样式无效
【发布时间】：2017-01-04 09:32:57
【问题描述】：

我有这个 html 的 sn-p，它显示了一个类似网格的结构。它看起来大部分都是我想要的，除了我想在最后三行有一个虚线下划线。我尝试使用以下样式设置底部边框：

style="border-bottom:dotted;border-bottom-color:黑色;border-bottom-width: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>

【问题讨论】：

Add border-bottom to table row <tr>的可能重复

标签： html css border

【解决方案1】：

像这样？

<!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>

【讨论】：