border-bottom style, не имеющий эффекта

У меня есть этот фрагмент html, который отображает сетку, подобную структуре. Похоже, я хочу его по большей части, за исключением того, что я хочу иметь пунктирную линию подчеркивания для последних трех строк. Я пытался иметь нижнюю границу не используя следующий стиль:border-bottom style, не имеющий эффекта

стиль = «границы дна: пунктирная; границы снизу цвет: черный; границы снизу ширина: 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

border-bottom style, не имеющий эффекта

ответ

Смежные вопросы