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

Question

这是我的小提琴:

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

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

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

我该如何解决这个问题？

Answer 1

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

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

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

Answer 2

这是一个解决方案:

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最后一个单元格的类).

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