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

您遇到的问题是由于边界崩溃时解决冲突的规则所致。实体优先于虚线： 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/

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

9 个回复

发起人

html

css

border

css_tables

问题状态

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

与内容相关的链接

9 个回复

发起人

html

css

border

css_tables

问题状态