微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

如何解决在表格设计中将虚线边框应用于单元格的问题

| 这是我的小提琴： http://jsfiddle.net/gFA4p/84/


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



我能够使左右边框显示为虚线，但不能显示底部边框。

我该如何解决？
    
解决方法

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

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

我相信您也需要将冲突的边界也划上虚线。因此，如果您在单元格的左边框上加了点线，则需要使该单元格左侧的右边框也加点（或其他任何优先级较低的点，但最有意义的是点线）。
    ,        这是一个解决方案：


如果您没有为每个单元格指定四个边框，而是仅指定了左边框和底边框，则可以避免边框冲突：


.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黑色边框，但最后一个没有底部点缀的边框除外。
    ,        好的，此答案是根据先前答案中提供的信息而部分设计的，但仅添加ѭ5或在相邻单元格上点缀左边界和右边界是不够的。

首先，各种浏览器之间的呈现机制是不同的。该小提琴显示了IE，FF和Opera中4行总高度上的两行。但是Chrome和SafariWin将左行缩短到仅一行。

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

其次，基本的css样式现在只为单元格提供了左边界和底边界。结果，最后一个单元格具有
lastCol
样式，因为IE7并未在
tr
标签上添加边框。

这是经过修改的小提琴，已通过IE7，IE8，IE9，FF，Opera，SafariWin和Chrome测试。

编辑：

如果您确实不希望使用虚拟列，那么我已经设法做到这一点，但是该解决方案在Chrome或SafariWin中不起作用。 （发生了一些奇怪的事情。也许其他人可以解释。）
    ,        这是我的小提琴：

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



我所做的就是添加


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

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



样式表的底部，并在每个选择列右侧的四个单元格中添加“ 3”类。

您遇到的问题是底部单元格的实线边框与顶部单元格的虚线边框重叠。这减轻了这种情况。
    ,        
.geniusPicks table tr.pickConsensusBody td {border:1px solid; background:grey;}



这是你的问题。我认为您应该将单独的类分配给表单元，而不是一般分配latr> td
也许有一种方法可以减少麻烦，但不确定。但基本上，该行会覆盖您的虚线样式。
    ,        看起来它正在覆盖或忽略您在td中的虚线边框。因为您在此处将边框设置为实线：


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



编辑：有人在这里击败我约20秒...
    ,        如果我将内联样式添加到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/

注意

小提琴将虚线显示为“ 14”，只是指出了变化。请参阅上面的代码以正确使用。

另外，请参见下面的注释，使用
!important
的含义（在CSS中使用“！important”的含义是什么？）
    ,        使用jQuery，您可以：


在该wanna-have-geen-borders列中找到所有元素
给他们全部点缀的绿色lef
给他们所有虚线的底部绿色边框

使用：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>


    ,        这里我们去http://jsfiddle.net/gFA4p/86/
    

                
                             
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

                            

                        

                    

                

            

            

              
          

            

              




              

            

          

          
           
          

            

              

                
苹果市值2025年有望达4万亿美元 

              

            

          

          
          
          

            

              

                
                
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native