边框底样式无效
[英]border-bottom style having no effect
问题描述
I have this snippet of html which displays a grid like structure. 
我有html的此片段，它显示了类似网格的结构。 It looks as I want it for the most part except that I want to have a dotted underline for the last three rows. 看起来大部分是我想要的，除了我想在最后三行中使用虚线下划线。 I tried to have a bottom border using the following styling: 我尝试使用以下样式设置底部边框：
style="border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px"> style =“ border-bottom：dotted; border-bottom-color：black; border-bottom-width：2px”>
However it has no effect at all even when I tweak the width etc., what am I missing? 但是，即使调整宽度等，它也没有任何作用，我还缺少什么？
<!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>
1 个解决方案
解决方案1
1 已采纳 2016-08-28 03:56:01
Like this? 像这样？
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
内嵌样式的tr border-bottom问题 - issue on tr border-bottom in inline style
React-Native 应用程序上只有边框底部阴影效果 - Only border-bottom shadow effect on React-Native app
底边间距 - border-bottom spacing
Trasition border-bottom？ - Trasition border-bottom?
方形/菱形的边框底部左侧样式 - Style left side of border-bottom with square / diamond shape
如何为<strong>文本</strong>设置边框底部样式 - How to set border-bottom style for <strong> text
边框底部未正确显示 - Border-bottom not showing correctly
将divider-bottom添加到div - Adding border-bottom to a div
css border-bottom iexplorer - css border-bottom iexplorer
修复边框底菜单 - Fix border-bottom menu
相关标签