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

时间：2011-06-13 02:58:59

标签： html css border css-tables

这是我的小提琴：

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

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

enter image description here

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

我该如何解决这个问题？

9 个答案:

答案 0 :(得分：6)

您所看到的问题是由于边界崩溃时解决冲突的规则。 Solid优先于点缀：

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

我相信你也需要点缀相互冲突的边界。因此，如果您将单元格的左边框点缀为虚线，则需要将单元格的右边框设置为左边的点（或者任何优先级较低的点，但点缀最有意义）。

答案 1 :(得分：6)

这是一个解决方案：

  1. 如果您没有为每个单元格指定四个边框，而只指定左边框和下边框，则避免边框冲突： 

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

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

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

答案 2 :(得分：1)

好的，这个答案部分是根据之前答案中提供的信息设计的，但只是添加!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中无效。 （有些奇怪的事情正在发生。也许其他人可以解释。）

答案 3 :(得分：1)

这是我的小提琴：

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

enter image description here

我所做的就是添加

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

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

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

您遇到的问题是底部单元格的实心边框与顶部单元格的虚线边框重叠。这减轻了这一点。

答案 4 :(得分：0)

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

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

答案 5 :(得分：0)

看起来像是覆盖或忽略了td中的虚线边框。因为你在这里将边框设置为实线：

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

编辑：有人在这里打了我~20秒......

答案 6 :(得分：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/

注意

小提琴将虚线显示为red，仅指出更改。请参阅上面的代码以正确使用。

此外，请参阅下面的评论，了解使用!important（What are the implications of using "!important" in CSS?）

的含义

答案 7 :(得分：0)

使用jQuery，您可以：

  • 找到那个想要有geen-border列的所有元素
  • 给他们所有点缀绿色的lef
  • 给他们全部点缀底部的绿色边框
    • 使用：last从最后一个元素中删除不需要的底部边框

您可以通过执行以下操作找到该列中的所有行：

$(td[class*="greenBorder"]).addClass("green_borders");
$(td[class*="greenBorder"]).last().css('border-bottom','')

注意我说的是因为我对jQuery不是很好，并且没有正确的语法/掌握如何使用选择器。但我见过类似事情的例子。你可以找到这个网站的大量例子，或查阅原始文件（有点不好，imho）。

好的，我做到了：

    <!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>

答案 8 :(得分：-1)

我们转到http://jsfiddle.net/gFA4p/86/

相关问题
最新问题