这是我的示例代码：
http://jsfiddle.net/gFA4p/84/
在这张截图中，绿色线条表示我想要应用虚线的位置。
我可以让左右边框出现为虚线，但底部边框却没有出现为虚线。
如何解决这个问题？
我可以让左右边框出现为虚线，但底部边框却没有出现为虚线。如何解决这个问题？
在表格设计中应用虚线边框到单元格存在问题
8
- keruilin
2
好的，我尝试了下面Kingjiv的建议，并在左/右边框方面取得了一些进展，但在底部边框方面遇到了问题，因此正在修改问题。 - keruilin
谢谢大家的回答...不幸的是只能选择一个，但你们多样化的解决方案应该对其他读者是很好的教材。 - keruilin
9个回答
6
您看到的问题是由于边框合并时的冲突解决规则导致的。实线优先于虚线:
http://lachy.id.au/dev/css/tests/bordercollapse/bordercollapse.html
我认为您需要将冲突的边框也变成虚线。因此，如果您想让单元格的左边框呈虚线，则需要将其左侧单元格的右边框也变成虚线（或任何优先级更低的样式，但虚线最合理）。
- James Montagne
2
@keruilin，对于上/下边框也适用相同的方法。与您更改fiddle以使用左侧边框的方式相同，可用于底部边框。如果您需要底部虚线，则下面的单元格需要具有虚线上边框。请参见第一个表中
vlah的底边界http://jsfiddle.net/gFA4p/103/。我只是将`clah`的上边框设置为虚线。 - James Montagne甜美的链接，非常好地展示了边框冲突解决。 - whoabackoff
6
这里有一个解决方法：
If you do not specify the four borders for each cell, but only the left and bottom borders, you will avoid border conflicts:
.geniusPicks table tr.pickConsensusBody td { border-left: solid 1px black; border-bottom: solid 1px black; background: grey; } .geniusPicks table tr.pickBody td { border-left: solid 1px black; border-bottom: solid 1px black; }Then, to make the dotted borders in the fourth column you just have to apply your
dottedLeftBorderanddottedBottomBorderclasses to its cells (but only thedottedLeftBorderclass for the last cell).
- Luc125
6
@NGLN 是的，这是默认模型；但在阅读了此页面上之前的答案和评论后，我最初认为问题中使用了折叠边框模型。 - Luc125
@NGLN @Luc，这个例子中的折叠是来自已选中的“规范化CSS”。规范化CSS具有
border-collapse:collapse;。 - James Montagne@kingjiv 啊，谢谢！我以后会关闭那个功能。 - NGLN
我不知道是否有其他人注意到这一点，但在Google Chrome中，“plah”行的左侧有一个实线边框，其他行都没问题...真的很奇怪，如果我从左到右突出显示“plah”，它就会消失...还有其他人有这种经历吗？ - whoabackoff
@whoabackoff 我已经纠正了这个问题，这是因为我忘记删除某些内容所致。 - Luc125
1
好的，这个答案部分来源于之前回答中提供的信息，但仅仅添加!important或使相邻单元格的左右边框变成点状是不够的。
首先，各种浏览器之间的渲染机制并不相同。这个fiddle在IE、FF和Opera中显示了4行总高度上的两条线。但Chrome和SafariWin将左侧线缩短到只有一行。
为了弥补这一点，我添加了一个额外的虚拟列，这也证明了在HTML中消除大多数类别非常有用。
其次，基本的CSS样式现在只给单元格添加了左和底边框。因此，最后一个单元格得到了lastCol样式，因为IE7不会向tr标签添加边框。
这里是修改后的fiddle，已经在IE7、IE8、IE9、FF、Opera、SafariWin和Chrome中进行了测试。
编辑：
如果您真的不想要虚拟列，我已经设法将其控制到 this far，但该解决方案在 Chrome 或 SafariWin 中无效。(似乎出了些问题。也许其他人能解释一下。)- NGLN
1
这是我的代码片段：
http://jsfiddle.net/gFA4p/109/
我所做的只是添加
.dottedBottomBorder {
border-top: none !important;
}
.dottedRightBorder + .dottedBottomBorder {
border-top: 1px solid black !important;
}
将
dottedBottomBorder 类添加到每个选择列右侧的四个单元格中，同时将其放置在样式表的底部。
您遇到的问题是底部单元格的实线边框重叠在顶部单元格的虚线边框上。这可以缓解这种情况。- Steve Robbins
0
使用jQuery，您可以：
- 查找那些想要绿色边框的列中的所有元素
- 给它们所有点状绿色左边框
- 给它们所有点状底部绿色边框
- 使用:last从最后一个元素中删除不需要的底部边框
您可以通过执行以下操作来查找该列中的所有行：
$(td[class*="greenBorder"]).addClass("green_borders");
$(td[class*="greenBorder"]).last().css('border-bottom','')
请注意，我说的是类似的东西，因为我不太擅长jQuery，也没有正确的语法/理解选择器的使用方式。但我看过类似的例子。您可以在该网站上找到大量此类示例，或查阅原始文档（在我看来有点糟糕）。
好的，我做到了：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Green Border</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">
.geniusPicks {}
.geniusPicks table {width:100%; font-size:12px;}
.geniusPicks table tr#picksHeading {border:0px solid; height:30px;}
.geniusPicks table tr#picksHeading th {background:darkRed; color:white; font-weight:bold;}
.geniusPicks table tr.pickHeading {border:0px solid;}
.geniusPicks table tr.pickHeading td {background:red; padding-left:10px;}
.geniusPicks table tr.pickConsensusBody td {border:1px solid; background:grey;}
.geniusPicks table tr.pickBody td {border:1px solid;}
.bigGap td {height:19px;}
.smallGap td {height:10px;}
.geniusPicks table th,
.geniusPicks table th+th+th+th+th+th,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td+td+td+td+td+td+td {text-align:center;}
.geniusPicks table th+th+th,
.geniusPicks table .pickHeading+tr td+td+td {text-align:left;}
.borderLeftRadius {
border-radius:15px 0 0 0;
-moz-border-radius:15px 0 0 0;
-webkit-border-radius:15px 0 0 0;
-khtml-border-radius:15px 0 0 0;
}
.borderRightRadius {
border-radius:0 15px 0 0;
-moz-border-radius:0 15px 0 0;
-webkit-border-radius:0 15px 0 0;
-khtml-border-radius:0 15px 0 0;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var green = jQuery("td[name='green']");
green.each(function(){
var cl = $(this).attr('class');
var prev = $(this).prev();
$(this)
.css('border-color','#aeaeae')
.css('border-style','dotted')
.css('border-right-style','solid')
.css('border-right-color','black')
.addClass(function(i,currentClass){ return "dotted"; });
if (prev.attr('class') == "dottedRightBorder") {
prev.css('border-right-style','dotted')
.css('border-right-color','#aeaeae')
}
if (cl=="top") {
$(this)
.css('border-top-style','solid')
.css('border-top-color','black')
} else
if (cl=="bottom"){
$(this)
.css('border-bottom-style','solid')
.css('border-bottom-color','black')
}
});
});
</script>
</head>
<body>
<div class="geniusPicks">
<table cellpadding="1" cellspacing="0">
<thead>
<tr id="picksHeading">
<th class="borderLeftRadius">Sport</th>
<th>Status</th>
<th colspan="2">Pick</th>
<th>Genius</th>
<th>Genius Credential</th>
<th class="borderRightRadius">Result</th>
</tr>
</thead>
<tbody>
<tr class="bigGap">
<td colspan="7"></td>
</tr>
<tr class="pickHeading">
<td colspan="7" class="borderLeftRadius">blah</td>
</tr>
<tr class="pickConsensusBody">
<td rowspan="4">moo</td>
<td rowspan="4">flah</td>
<td rowspan="4" class="dottedRightBorder">glah</td>
<td name="green" class="top">vlah</td>
<td>mlah</td>
<td>nlah</td>
<td rowspan="4">jlah</td>
</tr>
<tr class="pickConsensusBody">
<td name="green" >clah</td>
<td>dlah</td>
<td>xlah</td>
</tr>
<tr class="pickConsensusBody">
<td name="green" >plah</td>
<td>slah</td>
<td>klah</td>
</tr>
<tr class="pickConsensusBody">
<td name="green" class="bottom">qlah</td>
<td>wlah</td>
<td>zlah</td>
</tr>
<tr class="smallGap">
<td colspan="7"></td>
</tr>
<tr class="pickHeading">
<td colspan="7" class="borderLeftRadius">blah</td>
</tr>
<tr class="pickBody">
<td rowspan="4">moo</td>
<td rowspan="4">flah</td>
<td rowspan="4" class="dottedRightBorder">glah</td>
<td name="green" class="top">vlah</td>
<td>mlah</td>
<td>nlah</td>
<td rowspan="4">jlah</td>
</tr>
<tr class="pickBody">
<td name="green" >clah</td>
<td>dlah</td>
<td>xlah</td>
</tr>
<tr class="pickBody">
<td name="green">plah</td>
<td>slah</td>
<td>klah</td>
</tr>
<tr class="pickBody">
<td name="green" class="bottom">qlah</td>
<td>wlah</td>
<td>zlah</td>
</tr>
<tr class="smallGap">
<td colspan="7"></td>
</tr>
</tbody>
</table>
</div>
- Ярослав Рахматуллин
0
.geniusPicks table tr.pickConsensusBody td {border:1px solid; background:grey;}
这是你的问题。我认为你应该给表格单元格分配单独的类，而不是像 tr>td 这样进行一般的分配。 也许有一种更简便的方法，但我不确定。但基本上，那行代码覆盖了你的点状样式。
- AR.
0
看起来它正在覆盖或忽略您在 td 中的点状边框。因为您在此处将边框设置为实线：
.geniusPicks table tr.pickConsensusBody td {
background: none repeat scroll 0 0 grey;
border: 1px solid;
}
编辑：有人在这里比我快了约20秒...
- iHaveacomputer
0
如果我在HTML中添加内联样式并且去掉类名，这将起作用。
http://jsfiddle.net/jasongennaro/xWSKD/1/
编辑
如果我使用!important声明将样式添加到CSS中，这也可以正常工作。
.dottedRight{border-right:2px dotted black !important;}
.dottedBottom{border-bottom:2px dotted black !important;}
http://jsfiddle.net/jasongennaro/xWSKD/2/
注意
这些代码片段将虚线显示为 红色，只是为了指出更改。请参见上面的代码以获取正确使用方法。
此外，请参阅下面的注释，了解使用!important可能产生的影响（CSS中使用"！important"有什么影响？）。
- Jason Gennaro
4
两种解决方案都无法处理
1px dotted black。正如 kingjiv 所说：2px 的优先级高于 1px，就像 solid 高于 dotted。 - NGLN@NGLN 谢谢。感谢您的区分（但不是 -1 ;-) 然而，OP从未说过它需要是
1px。由于 2px dotted 的大小与 1px solid 非常相似（请参见上面的 fiddle），因此这对我来说似乎是一个合理的解决方案。 - Jason Gennaro谢谢@whoabackoff。这就是我在上面添加注释的原因：“小提琴图仅将虚线显示为红色，以指出更改。请参见上面的代码以了解正确的使用方法。” - Jason Gennaro
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接