将虚线边框应用于表格设计中的单元格的问题答案

【问题标题】：Issue with applying dotted border to cells in table design将虚线边框应用于表格设计中的单元格的问题
【发布时间】：2011-06-13 02:58:59
【问题描述】：

这是我的小提琴：

http://jsfiddle.net/gFA4p/84/

在此屏幕截图中，绿线表示我尝试应用虚线的位置。

我可以让左右边框显示为虚线，但不是底部边框。

我该如何解决这个问题？

【问题讨论】：

好的，我在下面尝试了 kingjiv 的建议，并在左/右边框方面取得了一些进展，但底部边框存在问题，因此正在修改问题。
感谢大家的回答...不幸的是只能选择一个，但您的解决方案的多样性应该是其他读者的良好教育材料

标签： html css border css-tables

【解决方案1】：

您看到的问题是由于边界崩溃时的冲突解决规则。实线优先于虚线：

http://lachy.id.au/dev/css/tests/bordercollapse/bordercollapse.html

我相信您还需要将相互冲突的边界打上点。因此，如果您将单元格的左边框设置为点状，则需要将单元格左侧的右边框也设置为点状（或任何优先级较低的东西，但点状最有意义）。

【讨论】：

@keruilin，这同样适用于顶部/底部边框。与您更改小提琴以使用左边框的相同方式适用于底部。如果您需要底部虚线，则下面的单元格需要有一个虚线顶部边框。请参阅第一个表中 vlah 的底部边框 jsfiddle.net/gFA4p/103 。我只是将clah 的顶部边框做了虚线。
甜蜜的链接，很好的演示了边界冲突的解决

【解决方案2】：

这里有一个解决方案：

如果您不为每个单元格指定四个边框，而只指定左边框和下边框，您将避免边框冲突：

.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;
}

然后，要在第四列中创建虚线边框，您只需将dottedLeftBorder 和dottedBottomBorder 类应用于其单元格（但只有dottedLeftBorder 类用于最后一个单元格）。

现在这里是对应的小提琴：http://jsfiddle.net/Fvds5/3/，其中第四列中的每个单元格现在都有左下角 1px 黑色边框，除了最后一个没有虚线下边框。

【讨论】：

+1 很好，这就是诀窍。但是有点迷茫。 separated borders model 不应该是默认值吗？
@NGLN 是的，这是默认模型；但是在阅读了这个页面上之前的答案和cmets之后，我首先认为问题中使用了折叠边框模型。
@NGLN @Luc，在示例中，折叠来自被选中的“规范化 CSS”。规范化 css 有 border-collapse:collapse;
@kingjiv 啊啊，谢谢！我将来会关闭该功能。
我不知道其他人是否注意到了这一点，但在谷歌浏览器中，“plah”行在左侧有一个实心边框，但其他行都很好......这真的很奇怪，如果我从左到右突出显示“plah”，它就会消失......还有其他人经历过这种情况吗？

【解决方案3】：

好的，这个答案部分是根据之前答案中提供的信息设计的，但简单地添加!important，或者使相邻单元格的左右边框都点缀是不够的。

首先，各种浏览器之间的渲染机制是不一样的。 This fiddle 在 IE、FF 和 Opera 的 4 行总高度上显示两行。但是 Chrome 和 SafariWin 将左行缩短到只有一行。

为了弥补这一点，我添加了一个额外的虚拟列，事实证明这对于消除 HTML 中的大多数类也非常有用。

其次，基本 css 样式现在只为单元格提供左边框和下边框。结果，最后一个单元格得到了lastCol 样式，因为IE7 没有给tr 标签添加边框。

这是revised fiddle，已在 IE7、IE8、IE9、FF、Opera、SafariWin 和 Chrome 上进行了测试。

编辑：

如果您真的不想要虚拟列，我已经设法获得this far，但该解决方案在 Chrome 或 SafariWin 中不起作用。 （发生了一些奇怪的事情。也许其他人可以解释一下。）

【讨论】：

【解决方案4】：

这是我的小提琴：

http://jsfiddle.net/gFA4p/109/

我所做的只是添加

.dottedBottomBorder {
    border-top: none !important;
} 

.dottedRightBorder + .dottedBottomBorder {
    border-top: 1px solid black !important;
}

到样式表的底部，以及在每个选择列右侧的四个单元格中添加dottedBottomBorder 类。

您遇到的问题是底部单元格的实线边框与顶部单元格的虚线边框重叠。这可以缓解这种情况。

【讨论】：

【解决方案5】：

.geniusPicks table tr.pickConsensusBody td {border:1px solid; background:grey;}

这是你的问题。我认为您应该为表格单元格分配单独的类，而不是一般分配 a la tr>td 也许有一种方法可以减少麻烦，但不确定。但基本上那条线会覆盖你的虚线样式。

【讨论】：

【解决方案6】：

看起来它正在覆盖或忽略 td 中的虚线边框。因为您在此处将边框设置为实心：

.geniusPicks table tr.pickConsensusBody td {
    background: none repeat scroll 0 0 grey;
    border: 1px solid;
}

编辑：有人在这里击败了我约 20 秒...

【讨论】：

【解决方案7】：

如果我将内联样式添加到 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/

注意

小提琴将虚线显示为red，只是为了指出变化。正确使用见上面的代码。

另外，请参阅下面关于使用 !important ( What are the implications of using "!important" in CSS? ) 的评论

【讨论】：

-1 这两种解决方案都不适用于1px dotted black。正如 kingjiv 已经说过的：2px 优先于 1px，就像 solid 优先于 dotted。
@NGLN 谢谢。欣赏区别（但不是 -1 ;-) 但是，OP 从未说过它必须是 1px。由于2px dotted 的大小与1px solid 非常相似（参见上面的小提琴），这对我来说似乎是一个合理的解决方案。
好的，如果您编辑答案并将红色更改为黑色，那么我将删除反对票。但提醒：What are the implications of using “!important” in CSS?
谢谢@whoabackoff。这就是我在上面添加注释的原因：“小提琴将虚线显示为红色只是为了指出更改。请参阅上面的代码以正确使用。”

【解决方案8】：

使用jQuery，您可以：

在wanna-have-geen-borders 列中查找所有元素
给他们全部点缀绿色的左边
给他们所有的虚线底部绿色边框
- 使用 :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>

【讨论】：

【解决方案9】：

我们去http://jsfiddle.net/gFA4p/86/

【讨论】：